Skip to content
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 · 11 comments
Closed

iOS 11: StatusBarOverlaysWebView=true leaves blank space #9041

derwaldgeist opened this issue Aug 24, 2017 · 11 comments

Comments

@derwaldgeist
Copy link

@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
Copy link
Member

@hwillson 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
Copy link
Author

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

@markshust
Copy link

@markshust markshust 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
Copy link
Author

@derwaldgeist derwaldgeist commented Oct 6, 2017

Nope, this doesn't work for me.

@markshust
Copy link

@markshust markshust 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
Copy link

@rossmartin 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
Copy link
Author

@derwaldgeist derwaldgeist commented Nov 11, 2017

Thanks for that hint, will try it.

@derwaldgeist
Copy link
Author

@derwaldgeist 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
Copy link
Author

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

@rossmartin
Copy link

@rossmartin rossmartin commented Feb 10, 2019

@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
Copy link
Author

@derwaldgeist derwaldgeist commented Mar 2, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants