iOS 11: html and body at 100% won't cover the whole page


#1

In mobile-settings.xml, I have this setting:

  App.setPreference('StatusBarOverlaysWebView', true);

Up to iOS 10, this meant that the whole device screen can be used for my app. The status bar will overlay it.

Since iOS 11, however, the content is shrunk and on the bottom of the page there are 22px of empty space, which is the size of the statusbar. This happens even though both the html and body elements are set to height:100%;

I can fix that by adding a margin of 22px to the top of html, but this would break the layout on iOS 10. Any ideas how to fix that new offset?


#2

It’s a known issue, see:
https://issues.apache.org/jira/browse/CB-12911
https://issues.apache.org/jira/browse/CB-12886

The proposed solution to set viewport-fit=cover in the meta name="viewport" tag doesn’t work with Meteor. It seems as if Meteor overwrites viewport settings on iOS. Is there any chance to overrule this?


#3

I am also still having this issue? Did you get this resolved?


#4

Nope, I filed an issue in the Meteor repo with the suggestion to overrule the viewport.

There’s another workaround: It doesn’t happen if you use Xcode 8.3.3 for building and thus targeting iOS 10. But that’s a bit quirky, since you can’t use this Xcode version to start the app directly on an iOS 11 device, which makes development very cumbersome. You have to archive the app before you can deploy it on the device.