Ion-header overlapping ios status bar

Ionic Framework ionic-v3
1

In my application at multiple points I have an ion-header, exampe:

<ion-header>
    <ion-navbar>
        <ion-title>Title</ion-title>
    </ion-navbar>
</ion-header>

This header overlaps with ios’s native status bar.

image
Screen Shot 2016-11-04 at 12.02.57 AM.png748×126 17 KB

Is this an issue with ionic2?

2

Same here. I’m using RC4 . Also, it doesn’t happen on all screens, just some… Not sure what’s the difference between them.

Does anybody has any ideas?

Thanks.

3 
@Component({
  selector: 'page'
})

use @Component directive, not @Page

4

I’m finding this today in my Ionic 3 app (works fine on Android) but on iOS on certain screens the header overlaps the status bar. All the screens with the problem use embedded components i,e.a parent component which contains a sub-component - the ion-header is in these sub-components. So I guess that’s the reason.

1 Like
5

I’m noticing the same. I also have my header defined in sub-components on these pages. Any fix?

1 Like
6

Some news about this issue ?

7

@Jbz797 - You may want to peek at this Github issue. https://github.com/ionic-team/ionic/issues/9878

onderceylan posted a temp fix. A flavor of that worked for me. Not as good as Ionic fixing it, but it works.

1 Like