Ionic-framework: iOS 11 status bar overlaps with header

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.

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

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

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

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

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

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.

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.

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.

@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.

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.

@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 https://github.com/ionic-team/ionic/issues/13294#issuecomment-340918487)

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 https://github.com/ionic-team/ionic/issues/13294#issuecomment-340812401 did not have the issue with a local build.

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.

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

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

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.

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?

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?

@mhartington My source code was submitted here https://github.com/ionic-team/ionic/issues/13294#issuecomment-340811372 and @kensodemann reproduced it only in Ionic View: https://github.com/ionic-team/ionic/issues/13294#issuecomment-340847517

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.

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

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

`

@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?

@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.

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

ionic cordova plugin ls

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?

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"

@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

Still, looks fine on my end 😞

Oh, that is strange...
Let me just install the latest Xcode and see if it changes anything.

@mhartington
Ok, after upgrade to the latest Xcode the status bar padding is running ok!!!
Maybe some compatibility with Xcode 8 as it do not have the latest iOS and iPhone X support?

To add to this, I'm also experiencing what's described in https://github.com/ionic-team/ionic/issues/13294#issuecomment-340847517.

If I build locally, and deploy to a device, all is good.
If I go through Ionic View (or use the Ionic build service to get a .ipk), the status bar and header overlap.

So in summary, library development tools for Ionic Pro are outdated. Can someone please from Ionic Pro confirm they are fixing it?, or else, We have to build in our local machine for now.

I don't think the problem is only in Ionic Pro as I do have this problem and am not using it at all.

I see this problem on production builds (--prod), but not otherwise when built with Xcode9. Both with run command or build followed by Xcode (which is what I use for uploading to store). Ionic version 3.8.0 and Ionic CLI 3.15.2. Tested on device running iOS10.3 after being reported on device running 11.

Line from index.html:
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

I think at this point I covered everything, right?

What version of @ionic/app-scripts are you using?

@marioestradarosa - have you logged an issue about this on the Ionic Pro Support Portal? I don't know if any of the Ionic Pro team would be actively monitoring this GitHub repo, but they will be monitoring that.

@kensodemann Thanks, that was what I've missed. Still had 3.0.0 instead of 3.0.1.

@kensodemann I submitted a report linking to this issue here, last friday.

@marcovtwout - excellent! Thank-you.

+1
Going through same issue. No solution found yet.

+1
and friday is deadline for my app O.o

Same issue, I am using app-scripts 3.0.1 though

just set in config.xml

       <platform name="ios">
               <preference name="StatusBarOverlaysWebView" value="false" />
       </platform>

Or use status bar plugin

       this.statusBar.overlaysWebView(false);

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!

@mhartington Any updates?

@mhartington I'm waiting on a solution for this too. Any solutions or workarounds I can try?

I'm using this workaround until fixed: https://github.com/ionic-team/ionic/issues/13294#issuecomment-341067770

@marcovtwout thanks so much. I read a few comments saying it didn't work for them. I'm definitely trying this when i came home

i'm having the same problem, my source is with viewport-fit = cover

@yemenifree's solution worked for me. Thanks!

Thanks, bumped into this after updating ionic-cli.

Interestingly, using viewport-fit=cover works well, unless you happen to go from an ionic page to a modal to another page. Then the final page padding is gone. To fix this I needed to use @yemenifree suggestion of this.statusBar.overlaysWebView(false);

FYI, for me, the config.xml suggestion doesn't work as when ionic cordova prepare is run its removed from config.xml
<platform name="ios"> <preference name="StatusBarOverlaysWebView" value="false" /> </platform>

Any updates for this issue?

For me it was not enough with content="viewport-fit=cover, ...".
So I added this one as well in the startup of my app:
this.statusBar.overlaysWebView(false);

I tested it on my iPhone and everything looked great.
BUT, after publishing to App Store, the app crashes at startup!!!

Just wanted you all to know that there might be problems introducing this fix...

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>

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.

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?

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",

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 #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.

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.

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

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

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

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 :-(

@nicolasborn In that case, you could use the Ionic Pro build service to build online. Or use this workaround: https://github.com/ionic-team/ionic/issues/13294#issuecomment-341067770

@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.

@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.

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 `

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

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.

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?

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"

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)

Any news about fixing it for xcode 8?

@mhartington i have finally reproduced this issue , it happens when you nav a new page in modal, pls check this https://github.com/ionic-team/ionic/issues/14401

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.

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

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

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.