Ionic-framework: TabsView top overlay iOS status bar when using tabsHideOnSubPages: true

[resper]

Short description of the problem:

The TabsView tabs overlap the statusbar on iOS devices.
I tried to add statusbarPadding: true but doesn't help

Steps to reproduce:

1. Build a app with Tabs
2. Add 'tabsHideOnSubPages: true'
3. Run on iOS emulator or phone

imports: [
    IonicModule.forRoot(MyApp,{
tabsPlacement: 'top',
tabsHideOnSubPages: true,
backButtonText: '',
statusbarPadding: true
})
]

Run ionic info from terminal/cmd prompt: (paste output below)

Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
OS:
Node Version: v4.6.0

[Squiggle]

We can also replicate this with a similar setup here. I notice this issue has returned as a regression a couple of times in previous releases...
https://github.com/driftyco/ionic/issues/6368
https://github.com/driftyco/ionic/issues/7203
https://github.com/driftyco/ionic/issues/6496

Can anyone suggest a sensible work-around? Would this be best fixed using plugin cordova-plugin-statusbar?

[ghenry22]

the same thing happens when opening a page from a modal, nav bar overlaps status bar. Seems like the statusbar padding isn't applied when the page is pushed onto the nav stack from a modal.

Been banging my head on the desk trying to find a way around this, it seems like it just shouldn't be an issue but keeps cropping up.

[kamok]

Here's a gif of what I have. http://g.recordit.co/vg9rrHtbkq.gif

I'm not even using tabsHideOnSubPages: true, but I'm using hideBackButton="true" on my navbar. Here's what my page looks like:

<ion-header>
  <ion-navbar color="primary" hideBackButton="true">
    <ion-buttons start>
      <button ion-button icon-only navPop clear color="light">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>My Account</ion-title>

    <ion-buttons end>
      <popover-nav-button></popover-nav-button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>My Account content goes here.</h3>
</ion-content>

Note, that if I set my root to one of the pages on the popover menu, the padding is fine. Only when you push a new page you get it. Also note I'm using the navPop.

Here's my ionic info

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39
ios-deploy version: 1.9.0
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

[manucorporat]

@kamok can you provide the repo you are using to reproduce the issue?

[kamok]

@manucorporat Thanks for you response. I've made a sample repo here. Use ionic emulate ios to see the problem when you click the top right popover and navigate to Page1. Didn't even needed the back button to replicate the issue.

[lostdev]

I have this issue as well! Does anyone have a workaround?

[lostdev]

@manucorporat any workarounds for this issue? How has this issue been open since October? :(

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/137