iPhone X Status bar overlap

Ionic Framework ionic-v3
1

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
2

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

3

See: iPhone X and Ionic?

4

@bustout @nayefhawa

Did you find a solution ?

5

i resolved that with media query styling

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

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

1 Like
7

u can detect device also

8

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
9

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
10

same problem here.

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

any solution?

11

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
12

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
13

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

1 Like
14

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