Ionic: White space in bottom with wkwebview in IOS 11

cordova-plugin-ionic-webview
phonegap wkwebview
cordova webview ios
viewport-fit=cover

After update IOS to 11 version, I have problem with wkwebview plugin in my app.

Ionic command released IOS 11 checklist but the problem is stay after all steps from checklist.

Ios platform version 4.4.0

Problem on any sim iPnone 5s, 6, 6s...

In screen bottom I have white space. Helps, please.

UPDATE: After i delete cordova-plugin-wkwebview-engine plugin white space is gone. But I need this plugin in my app.

About the bottom space when using wkwebview, here is a workaround:

Add some code in cordova-plugin-wkwebview-engine\src\ios\CDVWKWebViewEngine.m between line 99-100,

// re-create WKWebView, since we need to update configuration
WKWebView* wkWebView = [[WKWebView alloc] initWithFrame:self.engineWebView.frame configuration:configuration];
//add begin
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= 110000
if (@available(iOS 11.0, *)) {
  [wkWebView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
}
#endif
//add end
wkWebView.UIDelegate = self.uiDelegate;
self.engineWebView = wkWebView;

The code above came from cordova-plugin-ionic-webview

Ionic: White space in bottom with wkwebview in IOS 11, After update IOS to 11 version, I have problem with wkwebview plugin in my app. Ionic command released IOS 11 checklist but the problem is stay after all steps  Upon further investigation, when I uninstall this plugin the issue with the bottom white space is removed and the Navbar displays correctly. Upon rotating and going back again the Navbar then looks like on the screen above - so in essence uninstalling this plugin partly reversed the problem.

I uninstallied plugin cordova-plugin-wkwebview-engine and install cordova-plugin-ionic-webview and it`s work perfectly.

iPhone X initial height issue · Issue #53 · apache/cordova-plugin , Just simulated iOS11 on iPhone X and same problem. I'll try the ionic WebView this evening - but my project doesn't use ionic Upon further investigation, when I uninstall this plugin the issue with the bottom white space is  Web View plugin for Cordova, specialized for Ionic apps. - ionic-team/cordova-plugin-ionic-webview

Add viewport-fit=cover to solve this problem.

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

iOS 11: StatusBarOverlaysWebView=true leaves blank space · Issue , Since iOS 11, you cannot scale your app to the full page using this setting to fix Xcode 9 / iOS 11 issue with blank space at bottom of webview @derwaldgeist I had to update an old meteor / ionic v1 app recently and I  On startup after hiding the splash screen my app starts in a small dark box (320x460) with white space at the right and at the bottom. After about 1sec it gets resized to fullscreen (375x667). This sometimes even prevents Ionic from correctly sizing headers and scroll content.

Cordova + iOS11: empty space on bottom, The final iOS11 release is out there! Rebuilding our Cordova apps for iOS11 led to an unwelcoming surprise. There was an empty white space on the bottom of  When I navigate to new pages, as visible in the demo, there is a jumping effect, and sometimes a white bar at the top. @ionic/cli-utils : 1.12.0 ionic (Ionic CLI) : 3.12.0 global packages: cordova (Cordova CLI) : 7.0.1 local packages: @ionic/app-scripts : 3.0.0 Cordova Platforms : android 6.2.3 ios 4.4.0 Ionic Framework : ionic-angular 3.7.1

iOS 11 beta 9 with ionic 1 white bar issue - ionic-v1, Getting white bar at the bottom when using IOS-11beta9. I am not sure if it is cordova issue CB-13273: fix statusbar spacing with new iphoneX. by mhartington on Okay WKWebView Plugin has been updated, please try it:  Switching from WKWebView to cordova-plugin-ionic-webview fixed the issue for me: > ionic cordova plugin remove cordova-plugin-wkwebview-engine > ionic cordova plugin add cordova-plugin-ionic-webview --save I'm on cordova-ios 4.5.1. I did end up with a strange padding on one page in my app (only in iOS), which I fixed with:

iOS 11 Webview Viewport leaves 20 pixel white strip at top of page , Webview Viewport iOS 11 I just need help with th… up here: https://forum.​ionicframework.com/t/viewport-fit-cover-adding-20px-more-to-scroll a dark background, but all it did for me was shift white space from top to bottom. Rather than hard-coding a padding in pixels, you can handle this automatically in CSS using the new safe-area-inset-* constants in iOS 11. Note: in iOS 11.0 the function to handle these constants was called constant() but in iOS 11.2 Apple renamed it to env() , therefore to cover both cases you need to overload the CSS rule with both and rely

Comments
  • stackoverflow.com/q/46232812/777265
  • Not working for me: I add viewport-fit=cover on the viewport <meta> tag. After i delete cordova-plugin-wkwebview-engine plugin white space is gone .But I need this plugin in my app.
  • i have the same problem
  • can you please share your config.xml