iOS 11 status bar overlaps with header

See original GitHub issue

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

Current behavior: The status bar overlaps with the header on an iPhone SE with iOS 11.

Expected behavior: The header should have the correct top padding so the text does not overlap.

Steps to reproduce:

Create a new app with ionic start myApp tabs
Build with Ionic Pro and test with Ionic View

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\marco\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.8.0

System:

    Node : v6.10.0
    npm  : 3.10.10
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:76 (16 by maintainers)

Top GitHub Comments

50reactions

mhartingtoncommented, Nov 1, 2017

Make sure you have viewport-fit=cover in your app.

safe-area-inset is 0 on iOS11 devices that are not the iPhone X.

Is not really correct. When you introduce the correct viewport-fit attribute, it will make the viewport take up the entire screen space. As soon as you do that though, safe-areas kick in and provide the correct value.

Demo here viewport

And the applied css rules

Since your code sample is showing calc(env(safe-area-inset-top) + 4px);, that could resolve to ‘4px’ and maybe this is still interpreted by browsers that don’t support env(). env() is skipped, but constant() is still interpreted (also judging from #13294 (comment))

env and constant are both used as constant was only available for iOS 11.0, but for iOS11.1, which is rolling out, the function has changed to env, so we need both for now.

25reactions

mhartingtoncommented, Nov 8, 2017

Hey everyone! Finally able to reproduce this. Its a mix of Old xcode versions on Pro and the newer iOS updates. We’ll be in touch about the update. Hang tight!