New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041
Comments
Thanks @derwaldgeist - definitely an issue. For the time being, using something like |
@hwillson Thanks for your response. Yes, it would be awesome if the meta overrides would be possible. Just for the records: the problem does not occur, if you build you app with Xcode 8.3.3 and deploy the app on an iOS 11 device afterwards. However, this doesn't help much, as Xcode 9 is required to directly run the app on iOS 11, so this "workaround" is very cumbersome and only useful if you make the final build. For development purposes, it's way to much work to archive the app and then deploy it manually using the Organizer. And you can't debug it this way. |
I'm able to create a file at
This seems to override any default setting, and fix this? |
Nope, this doesn't work for me. |
I can confirm this is an issue on Xcode 9 / iOS 11 when testing on iPhone 8 and iPhone X. Everything is rendering correctly for me with iPhone 8 for some reason, but iPhone X display is very botched (see issue #9208). This will be a very large issue when iPhone X is released, as it collapses the display to the size of an iPhone 6. |
@derwaldgeist Thanks for bringing up this issue. I'm experiencing the same problem and just overriding the meta tag wasn't working for me. What I have found to work though is to update the
For some reason calling Also make sure you have only one viewport tag in your Xcode project file <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"> |
Thanks for that hint, will try it. |
I am not able to set this viewport correctly. Any attempt I try will lead to multiple entries in the html file, with one being Meteor's standard viewport and the other my override. In effect, iOS seems to take the first viewport entry only and ignores my cover setting. I'm really wondering how you all are doing this?! |
@rossmartin: I tried your statusbar overlay hack. This removed some additional padding at the top of my app, but instead of this, more padding was added to the bottom. And on my iPad, the statusbar now overlays my app which is not what I wanted. I guess this hack can only work if this is what you intended. |
@derwaldgeist I had to update an old meteor / ionic v1 app recently and I finally discovered the root cause to this problem that we both experienced. When iOS 11 came out it messed up new apps being built that used the So what finally happened in
That was part of this commit - apache/cordova-plugin-wkwebview-engine@81eeade Hopefully this helps anyone with a cordova app using an older version of meteor. It is unfortunate how coupled the cordova platform versions are with meteor. If you have an older version of meteor using |
@rossmartin Thanks for the info. Yes, the tight coupling of Meteor to specific Cordova versions sucks. |
Since iOS 11, you cannot scale your app to the full page using this setting anymore:
It will always leave a 22px high space below your app, even if you set the
<head>
and<body>
to 100%.This is a known issue:
https://issues.apache.org/jira/browse/CB-12886
and seems to be an intentional change made by Apple.
It can be fixed by adding
viewport-fit=cover
to the<meta name="viewport">
tag in the<head>
. Unfortunately, this is not possible with Meteor, since setting the viewport in a head template will be overruled by the standard boilerplate, as described here:meteor/meteor-feature-requests#169
The text was updated successfully, but these errors were encountered: