Ionic-framework: ion-tabs tabsPlacement top looking bad on iPhone X

[joelmarquez90]

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

[Sampath-Lokuge]

Oh.. You're using very old app-scripts and also update your project to latest Ionic 3.8.0. It has a lot of iOS fixes.

https://github.com/ionic-team/ionic/releases/tag/v3.8.0

[joelmarquez90]

@Sampath-Lokuge still happening, now with the latest tools:

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 : 3.0.1
    Cordova Platforms  : android 6.2.3 ios 4.5.0
    Ionic Framework    : ionic-angular 3.8.0

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

[theHellyar]

With latest scripts and 3.8.0 it is even worse....
tabsPlacement="top" when set to bottom works fine...
See the tabs at top and the faint pixels of the text for those tabs....

for a quick bandaid this works:
.ios { .tabs { .tabbar { margin-top:25px; padding-bottom: 0px; } } }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!