iOS 11 status bar overlaps with header

[marcovtwout]

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

[marcovtwout]

I also tried using WkWebView following these instructions (https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions), but this did not solve the issue.

[marcovtwout]

I also tried using Ionic Package and installing on device, didn't work either.

[kensodemann]

Hello! Thank you for opening an issue with us!

I tried your steps to reproduce with the exception of building locally on my Mac instead of using IonicPro and it worked fine. So, this could be an issue with Ionic Pro.

Just to rule out differences between what I generated and what you have, would it be possible for you to upload your sample app to GitHub so I could have a look?

Thank you for using Ionic

[marcovtwout]

Here is the source code: teststatusbar.zip (I excluded platforms, plugins and www, is that what you need?)

[marcovtwout]

This shouldn't matter, but to be exact I used ionic start myApp sidemenu instead of ionic start myApp tabs

[kensodemann]

That will work fine. Thank-you. I will let you know how my tests go.

[kensodemann]

Your code looks fine. Has everything that it should, etc.

Building locally on my Mac and running on an SE emulator looks fine:

This may be an issue with Ionic Pro. Let me check on that.

[kensodemann]

I was able to duplicate this issue by:

1. ionic start test-sidemenu sidemenu
2. link to Ionic Pro account when asked to
3. build local to my Mac and install on my phone, all works great
4. push to Ionic Pro, wait for build, view in Ionic View, get status bar crowding issue

Assigned to the maintainer of View to have a look at.

[tcigrand]

I'm running into the same thing, I believe these lines are the culprit.https://github.com/ionic-team/ionic/blob/33960f1a5a98fc49525cfccc85f0847bf3a02de5/src/platform/cordova.scss#L48-L50

Debugging in safari and saw this.

[tlancina]

@tcigrand not sure where you're seeing that, but are you using app-scripts 3.0.0? There was an insidious bug fixed in 3.0.1 where --prod builds were stripping some CSS: Bug Fixes.

[tcigrand]

I was on 2.1.4, but updating to 3.0.1 doesn't seem to fix it.

I saw that in the safari dev tools when debugging an app running on an iPhone 8 Plus with iOS11.

In main.css I'm getting the following lines.

.ios ion-menu > .menu-inner > ion-header > .toolbar.statusbar-padding:first-child {
  padding-top: calc(20px + 4px);
  padding-top: calc(constant(safe-area-inset-top) + 4px);
  padding-top: calc(env(safe-area-inset-top) + 4px);
  min-height: calc(44px + 20px);
  min-height: calc(44px + constant(safe-area-inset-top));
  min-height: calc(44px + env(safe-area-inset-top));
}

My thought was that safari is seeing multiple padding-top and min-height properties and then it uses the last one. For non-iPhoneX devices, we'd want to use padding-top: calc(20px + 4px); and min-height: calc(44px + 20px);. For iPhoneX we'd want to use the rules with safe-area-inset-top.

[marcovtwout]

@tcigrand You might be on the right track.

https://www.quirksmode.org/blog/archives/2017/10/safeareainset_v.html says:

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

https://webkit.org/blog/7929/designing-websites-for-iphone-x/ says:

For browsers that do not support env(), the style rule that includes it will be ignored

Two possible explanations:

• 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 iOS 11 status bar overlaps with header #13294 (comment))

I'm not developing on Mac and am not able to verify this right now.

--

Then again, it could still be an issue with Ionic Package, since #13294 (comment) did not have the issue with a local build.

[marcovtwout]

I was able to access a Mac and confirmed what @tcigrand found through the inspector.

On an iPhone 5 with iOS 10, it looks like this:

On an iPhone SE with iOS 11, it looks like this:

As you can see, the iPhone SE with iOS 11 uses the rule with constant() where safe-area-inset-top has a value of 0.

This should probably fixed in many more ionic stylesheets, grepping in the ionic source for constant(safe-area-inset-top) returned 9 results.

[marcovtwout]

I'm tagging @mhartington for introducing these lines of css :)

[marcovtwout]

Here's an ugly workaround for the time being: https://gist.github.com/marcovtwout/145438116e17d20415a377d92db6ccab

[mhartington]

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

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.

[marcovtwout]

viewport-fit=cover is present in the meta tag of the supplied example code, so something else must be going on. Did you only test on iOS 11.1 (just released yesterday) or also 11.0.3?

[mhartington]

I've been testing on every version of iOS 11 that's been released and also ios10.

@marcovtwout can you provide a git repo that has the same issue? With very detailed instructions? How can I recreate?

[marcovtwout]

@mhartington My source code was submitted here #13294 (comment) and @kensodemann reproduced it only in Ionic View: #13294 (comment)

Summarizing the above experience so far, it could still be that this issue only exists in Ionic View / Ionic Package and not when doing an up-to-date local build.

[tcigrand]

I was missingviewport-fit=cover, adding it fixed the issue. Thanks for the help! Sorry to clutter this issue up.

[LuizTokuhara]

I have tested and got the same result with viewport-fit=cover... when running on device the status bar padding is gone.

To reproduce I just start the ionic project blank and run it on simulator and device, nothing was changed.

Xcode 8.3.3, simulator running iOS 10.3 and device with iOS 11.0.3.
For build just used "ionic cordova build ios".

`
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

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

System:

Android SDK Tools : 26.0.2
ios-sim           : 6.0.0 
Node              : v8.1.3
npm               : 5.3.0 
OS                : macOS Sierra
Xcode             : Xcode 8.3.3 Build version 8E3004b 

Misc:

backend : pro

`

[mhartington]

@LuizTokuhara I am not able to replicate this at all. Are you deploying to the device through Ionic View or ionic cordova run ios

Can you push that up to github for me to look at?

[LuizTokuhara]

@mhartington
I just started a ionic blank project, make an "ionic cordova build ios", open the project in Xcode and build an Adhoc to test on device.

[mhartington]

Hm, thats exactly what I did to try to replicate. can you run

ionic cordova plugin ls

[LuizTokuhara]

cordova-plugin-device 1.1.4 "Device" cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 4.0.3 "Splashscreen" cordova-plugin-whitelist 1.3.1 "Whitelist" ionic-plugin-keyboard 2.2.1 "Keyboard"

Maybe I need to upgrade something?

[marcovtwout]

For me that gives:

> cordova plugin ls
cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.6 "Device"
cordova-plugin-health 1.0.2 "Cordova Health"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova-sqlite-storage 2.0.4 "Cordova sqlite storage plugin"
de.appplant.cordova.plugin.local-notification 0.8.5 "LocalNotification"
ionic-plugin-keyboard 2.2.1 "Keyboard"

[LuizTokuhara]

@mhartington
I have uploaded the ios build that I made here, don't know if you can test and see if there is something different from your build.
iOS build

[dmgfjaved]

I had a similar issue and I was using PhoneGap Build service. Here is what I had to do to fix the issue.

Update the following line in index.html of your ionic project. You can see I have added gap://ready file: in the meta tag.

<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *;img-src 'self' data: *">

Update config.xml file with the following preference in order to make it work with iOS 11. Not required for iOS 10:
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

[BErik79]

Thanks for replying @dmgfjaved! The platform setting in config.xml worked for me. Wonder why it did not work when doing the same thing in the angular code...
I also wanted to share that the problem I had with my app working in debug but not when published to the app store, was down to XCode version. I had during my testing used version 9, but when I tried to release the app I got problems. The "solution" was to downgrade XCode to version 8, so that changed the compilation of the app.

[jzwcars]

We can still reproduce this issue using latest Ionic 3.9.2 and XCode Version 8. Is there any fix coming or do we have to try and fix it ourselves?

[RezaRahmati]

I have same issue
I have viewport-fit=cover, and different result on real devices

iPhone 7, ios 11.2 -> OK
iPhone 8, ios 11.2 -> Not OK

using
@ionic/app-scripts: "3.0.0",
ionic: "3.13.0",

[matthewkremer]

Hey everyone! Thank you for your continued patience and feedback on this one. Just wanted to give you guys a little update on where we are at with fixing this on the Ionic Pro side:

1. Ionic View for iOS recently had a new native release (you'll have to update through the App Store) that fixes the header issue when checking stuff out in View.

2. We're actively working on fixing this on the Ionic Package side and it's our Add support for "tap" virtual event #1 priority, it's been a little more involved than normal because we're simultaneously adding a new feature so we don't break older projects by fixing the bug:

3. When the fix for Ionic Package comes, you'll be able to choose XCode 8 or XCode 9 so you're in full control of what we use to build your app. We will continue to grow the library of available setups and versions over time.

We're hoping for a release fairly soon, thanks for understanding!

Thanks,
Matt

P.S. I know much more about the Pro side than the local framework side, if there are issues building LOCALLY (not using Package), I recommend upgrading to XCode 9.

[CookieCookson]

Thanks @matthewkremer - I can confirm that updating from xCode 8.3.3 to 9 solved my issue where the status bar padding was not applied when the app was built locally for the iPhone 6 running iOS 11.2.

[mhartington]

This should be taken care of for all Pro customers now.

[jzwcars]

This issue still persists using latest Ionic Native (4.5.2) and latest app scripts (3.1.7)

$ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.7
    Cordova Platforms  : android 6.2.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    ios-sim    : 6.0.0 
    Node       : v6.11.4
    npm        : 5.5.1 
    OS         : OS X El Capitan
    Xcode      : Xcode 8.2.1 Build version 8C1002 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

[marcovtwout]

@jzwcars You have to build using Xcode 9 (maybe that should be documented somewhere outside of this issue)

[nicolasborn]

unfortunately, i can't build my app with xcode 9 because my imac is too old and i can't update it to sierra. without sierra no xcode 9 :-(

[marcovtwout]

@nicolasborn In that case, you could use the Ionic Pro build service to build online. Or use this workaround: #13294 (comment)

[nicolasborn]

@marcovtwout: Ionic Pro is too expensive for this. It's a private unpaid project. I'm using the workaround and hope that it also works for the iPhone x.

[jzwcars]

@marcovtwout The issue is "fixed" when using Xcode 9.

Yet a number of users (including me) are unable to move to Xcode 9 yet, either due to OS / Hardware restrictions or simply because compiling with Xcode 9 introduces a whole bunch of new issues (eg. about automatic signing, push messages...). Therefore we'd really appreciate if Xcode 8.x were still supported.

It may seem like a minor CSS / layout issue, but it makes development life so much harder for quite a few of us.

[sonicwong]

Still got extra space in header @ ios 10.3 hardware (iphone 5s , iphone7plus),
but no extra space in iphone emulator.

`cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
Node       : v9.3.0
npm        : 5.6.0 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 `

[mhartington]

@sonicwong please open a new issues with a sample app upload to github.

[jcyh0120]

I spent whole afternoon debugging for the status bar and found that I didn't uncomment the following line in index.html.

<!-- cordova.js required for cordova apps (remove if not needed) -->
<!--<script src="cordova.js"></script>-->

I was developing PWA at first with ionic. I start migrating my PWA to app then facing this issue.

[collindutter]

Still having this issue, but interestingly, when I focus an input it seems to correct itself. Has anyone else seen this?

At this point I'm unsure what to try. I've added the viewport tags, tried both the JS and config versions of StatusBarOverlaysWebView, and even reconfigured my whole project from scratch. Any ideas?

[GiselaMD]

Still with this issue too. I've tried adding this.statusBar.overlaysWebView(false); and also in the config.xml, I have the content="viewport-fit=cover and I updated my Xcode to Version 9.3 (9E145)

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 8.0.0 

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 7.0.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.9.4
npm               : 5.6.0 
OS                : macOS High Sierra

Plugins:

cordova-plugin-device 1.1.7 "Device"
cordova-plugin-file 6.0.1 "File"
cordova-plugin-file-opener2 2.0.19 "File Opener2"
cordova-plugin-fullscreen 1.1.0 "cordova-plugin-fullscreen"
cordova-plugin-inappbrowser 2.0.2 "InAppBrowser"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.1 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 2.2.0 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"

[sonicwong]

I found that there are size error when in iOS hardware with os10.3. Everything go correct after upgrade os to 11.x. (no error in simulator)

[Chris1234567899]

Any news about fixing it for xcode 8?

[JackZhang1988]

@mhartington i have finally reproduced this issue , it happens when you nav a new page in modal, pls check this #14401

[Ownsmash]

I have been experiencing this issue as well. For me, when I run ionic cordova run ios it works perfectly, however, when deploying with XCode 9 I was experiencing the overlap.

I found that in my project I had the setting "requires fullscreen" checked. See image.

After un-checking this setting and making another build with XCode the problem was fixed. Hope this helps.

[NayHaPal]

this artical may be helpfull
https://ayogo.com/blog/ios11-viewport/

[fuentes73]

I've experienced this issue too and after apply statusBar.overlaysWebView(false); the issue has been fixed.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.