Ionic: White space in bottom with wkwebview in IOS 11

Question

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 a

Answer 1

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

Answer 2

None of the provided solutions worked for me. For iOS 11+ try the below, solved my problem.

Add the below line to your config.xml

<plugin name="cordova-plugin-disable-ios11-statusbar" source="npm" spec="*"/>

Goodluck!

Answer 3

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

Answer 4

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