iPhone X Status bar overlap

I know there have been several posts on this, but I’m still running in to this issue (see how the home icon overlaps the battery in the statusbar):

image

  • ionic-angular 3.9.2
  • cordova-plugin-statusbar 2.4.1 “StatusBar”
  • have “viewport-fit=cover” in viewport meta

This only happens on the iPhone X. Anyone know what I might be missing?

1 Like

same issue here in iphone x the.header overlap !r

See: iPhone X and Ionic?

@bustout @nayefhawa

Did you find a solution ?

i resolved that with media query styling

@media (max-width: 380px){
.ios ion-toolbar{
  padding-top: 40px;
  ion-title{
    padding-top: 35px;
  }
}

Using padding on toolbar works on iPhone X, but on older iPhone the toolbar takes way too much space now :confused:

u can detect device also

Thanks. I managed to solve the issue with this ;

.toolbar-ios {
    padding-top: env(safe-area-inset-top);
  }

But now I have another issue : the header overlaps the content. Can’t set a margin-top to the content because iPhone X and other iPhones don’t have the same header height. Anyway, that is not the subject here.

Thanks again :wink:

5 Likes

I solved this by using env(safe-area-inset-top) for the margin on the content as well, now the margin adjusts dynamically to the iPhone size

1 Like

same problem here.

env(safe-area-inset-top) Working fine on iOS 10/11 but not later.

any solution?

I was able to solve this with the following CSS (takes care of menu, content and modals)

.ios.platform-mobile ion-menu.menu-enabled, .ios.platform-mobile ion-menu.menu-enabled, .ios.platform-mobile ion-modal.show-page {
    margin-top: constant(safe-area-inset-top); // for ios 11.1
    margin-top: env(safe-area-inset-top); // for ios 11.2 and onwards
    margin-bottom: env(safe-area-inset-bottom);
    height: calc(100% - constant(safe-area-inset-top));
    height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
1 Like

Hi, noob here - where should I add this code for a ionic creator project? (which css file or in attribute of index.html)

1 Like

app.css file, inside src/app/app.css

1 Like

This worked!
Just need to done background color change manually.