ion-tabs tabsPlacement top looking bad on iPhone X #13270
Description
Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x
I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
On the iPhone X simulator, ion-tabs with top tabs placement looks like this:
Note that the tabs height it's wrong.
Expected behavior:
It should look like this (iPhone 8):
Steps to reproduce:
Related code:
This is the html of that page:
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Lavados</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs #tabs tabsPlacement="top" tabsHighlight=true>
<ion-tab [root]="upcomingBookings" tabTitle="Próximos"></ion-tab>
<ion-tab [root]="pastBookings" tabTitle="Finalizados"></ion-tab>
</ion-tabs>Other information:
Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
cli packages: (/Users/joel/workspace/glou/Glou/node_modules)
@ionic/cli-utils : 1.15.2
ionic (Ionic CLI) : 3.15.2
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
@ionic/app-scripts : 1.3.7
Cordova Platforms : android 6.2.3 ios 4.5.0
Ionic Framework : ionic-angular 3.7.1
System:
Android SDK Tools : 25.2.5
ios-deploy : 1.9.1
ios-sim : 6.0.0
Node : v6.11.3
npm : 2.15.12
OS : macOS Sierra
Xcode : Xcode 9.0 Build version 9A235
Environment Variables:
ANDROID_HOME : /usr/local/opt/android-sdk
Misc:
backend : legacy