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

Closed
derwaldgeist opened this Issue Aug 24, 2017 · 9 comments

Comments

Projects
None yet
4 participants
@derwaldgeist

derwaldgeist commented Aug 24, 2017

Since iOS 11, you cannot scale your app to the full page using this setting anymore:

  App.setPreference('StatusBarOverlaysWebView', true);

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

@hwillson

This comment has been minimized.

Member

hwillson commented Sep 15, 2017

Thanks @derwaldgeist - definitely an issue. For the time being, using something like cordova-plugin-disable-ios11-statusbar could help, but we really should allow cordova <meta name="viewport" /> overriding (and <meta http-equiv="Content-Security-Policy" /> while we're at it). Adding this functionality could be seen as a feature request, but the issue you've identified is only going to become more popular after iOS 11 is released on Sept. 19th.

@derwaldgeist

This comment has been minimized.

derwaldgeist commented Sep 15, 2017

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

@markoshust

This comment has been minimized.

markoshust commented Oct 5, 2017

I'm able to create a file at client/index.html with the following contents:

<head>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
  />
</head>

This seems to override any default setting, and fix this?

@derwaldgeist

This comment has been minimized.

derwaldgeist commented Oct 6, 2017

Nope, this doesn't work for me.

@markoshust

This comment has been minimized.

markoshust commented Oct 23, 2017

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.

@rossmartin

This comment has been minimized.

rossmartin commented Nov 11, 2017

@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 cordova-plugin-statusbar to 2.3.0 and then do this after the cordova deviceready event fires -

if (window.StatusBar) {
  // needed to fix Xcode 9 / iOS 11 issue with blank space at bottom of webview
  // https://github.com/meteor/meteor/issues/9041
  StatusBar.overlaysWebView(false);
  StatusBar.overlaysWebView(true);
}

For some reason calling StatusBar.overlaysWebView(false); and then StatusBar.overlaysWebView(true); gets rid of the blank space at the bottom.

Also make sure you have only one viewport tag in your Xcode project file Staging/www/application/index.html that is set to this below -

<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">
@derwaldgeist

This comment has been minimized.

derwaldgeist commented Nov 11, 2017

Thanks for that hint, will try it.

@derwaldgeist

This comment has been minimized.

derwaldgeist commented Jan 8, 2018

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

@derwaldgeist

This comment has been minimized.

derwaldgeist commented Jan 8, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment