Ionic 3 app showing additional area below status bar iOS 11.0 beta

[hofimax]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ x] 3.x

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Ionic 3 App on iOS 11.0 beta (version 15A5278f) (simulator) shows additional unneccesary white area under status bar:

This can be fixed by adding "viewport-fit=cover" to the viewport meta tag, but introduces new problem at bottom of screen:

Expected behavior:
Look the same as in iOS 9 and iOS 10

Steps to reproduce:
Run Ionic 3 app in iOS 11 simulator using xCode 9 beta

[mhartington]

Hey there! So we're going to keep all the ios 11 issues in a related issue (#12020) in order to better track any issue that comes up during the betas. I've added your issue and information there. Please follow #12020 for any updates.

[hofimax]

this issue has been resolved as of ios 11 beta 5

[qliqdev]

@hofimax I’m using iOS 11 beta 9 but this problem still appear

[hofimax]

@abbazer not for me, but we are using the WKWebView

[qliqdev]

Solved by adding

[ahmadtawakol]

I’m on beta 10, using WKWebView, and I still have the same problem.

A fix for this has been added by Apple since beta 4, and that is to add “viewport-fit=cover” to your index.html meta tag. I can confirm that it does work, but not all the time. It’s very random.

[hofimax]

Just tested on iOS 11 beta 10 with WKWebView and it works reliably. We are NOT using viewport-fit=cover

[ahmadtawakol]

If I don't add viewport-fit=cover then the header doesn't go under the status bar and the status bar just has a white background. If I add viewport-fit=cover then the header goes under the status bar like it should, but it's as if the whole app moves up, instead of stretching to fill the screen, and the white background that was under the status bar is now under the footer of the app.

I'm not sure if I'm explaining it clearly, let me know if you need me to clarify anything.

Edit: I just looked at the screenshots you posted above, this is exactly what it is happening with me.

[tobiasmuecksch]

Problem still exists in iOS 11 Golden Master. This is NOT a beta only problem and will NOT go away when iOS 11 is released in the next few days.

[mhartington]

We're working with the cordova team to address this. Please keep an eye out on this.

apache/cordova-plugin-statusbar#85

[jacquesdev]

For what it's worth I see it as well in ionic1, assuming because it's related to cordova-plugin-statusbar.