iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041

derwaldgeist · 2017-08-24T16:17:28Z

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

The text was updated successfully, but these errors were encountered:

hwillson · 2017-09-15T13:44:59Z

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 · 2017-09-15T16:49:53Z

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

markshust · 2017-10-05T21:41:14Z

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 · 2017-10-06T11:46:43Z

Nope, this doesn't work for me.

markshust · 2017-10-23T21:51:15Z

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 · 2017-11-11T22:08:02Z

@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 · 2017-11-11T22:33:49Z

Thanks for that hint, will try it.

derwaldgeist · 2018-01-08T16:35:58Z

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 · 2018-01-08T16:40:46Z

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

rossmartin · 2019-02-10T20:12:35Z

@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 cordova-plugin-wkwebview-engine (meteor forces you to use this and you cannot use UIWebView).

So what finally happened in cordova-plugin-wkwebview-engine in May 2018 was this addition (around line 99, see "start of fix" and "end of fix" for new code needed for iOS 11+) -

cordova-plugin-wkwebview-engine\src\ios\CDVWKWebViewEngine.m

// re-create WKWebView, since we need to update configuration
WKWebView* wkWebView = [[WKWebView alloc] initWithFrame:self.engineWebView.frame configuration:configuration];

// start of fix
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000
if (@available(iOS 11.0, *)) {
  [wkWebView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
}
#endif
// end of fix

wkWebView.UIDelegate = self.uiDelegate;
self.engineWebView = wkWebView;

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 cordova-plugin-wkwebview-engine you will need this fix for iOS 11+ if it is not in place.

derwaldgeist · 2019-03-02T04:14:47Z

@rossmartin Thanks for the info. Yes, the tight coupling of Meteor to specific Cordova versions sucks.

derwaldgeist mentioned this issue Aug 24, 2017

Allow override of boilerplate package meteor/meteor-feature-requests#169

Closed

hwillson added Type:Bug confirmed We want to fix or implement it Impact:most Severity:has-workaround Project:Mobile labels Sep 15, 2017

derwaldgeist mentioned this issue Oct 24, 2017

[1.6-rc.6] iPhone X misreporting window.screen.availHeight property #9208

Closed

skirunman mentioned this issue Nov 16, 2017

iPhone X status bar fix #9375

Merged

benjamn closed this as completed in #9375 Nov 22, 2017

rossmartin mentioned this issue Jul 11, 2019

Cordova iOS - Update cordova-plugin-wkwebview-engine to 1.2.0 in webapp package #10626

Closed

iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041

iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041

derwaldgeist commented Aug 24, 2017

hwillson commented Sep 15, 2017

derwaldgeist commented Sep 15, 2017

markshust commented Oct 5, 2017

derwaldgeist commented Oct 6, 2017

markshust commented Oct 23, 2017 •

edited

rossmartin commented Nov 11, 2017

derwaldgeist commented Nov 11, 2017

derwaldgeist commented Jan 8, 2018 •

edited

derwaldgeist commented Jan 8, 2018 •

edited

rossmartin commented Feb 10, 2019 •

edited

derwaldgeist commented Mar 2, 2019

iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041

iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041

Comments

derwaldgeist commented Aug 24, 2017

hwillson commented Sep 15, 2017

derwaldgeist commented Sep 15, 2017

markshust commented Oct 5, 2017

derwaldgeist commented Oct 6, 2017

markshust commented Oct 23, 2017 • edited

rossmartin commented Nov 11, 2017

derwaldgeist commented Nov 11, 2017

derwaldgeist commented Jan 8, 2018 • edited

derwaldgeist commented Jan 8, 2018 • edited

rossmartin commented Feb 10, 2019 • edited

derwaldgeist commented Mar 2, 2019

markshust commented Oct 23, 2017 •

edited

derwaldgeist commented Jan 8, 2018 •

edited

derwaldgeist commented Jan 8, 2018 •

edited

rossmartin commented Feb 10, 2019 •

edited