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

Not working for me: I add `viewport-fit=cover` on the viewport tag. After i delete `cordova-plugin-wkwebview-engine` plugin white space is gone .But I need this plugin in my app. — wstudiokiwi, Oct 01 '17 at 06:12

score 8 · Answer 1 · answered Mar 06 '18 at 02:08

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

Does this workaround not included in the plugin itself? Why do we need to add separately? — Kunal Kakkad, May 29 '20 at 04:03

score 4 · Answer 2 · answered Oct 01 '17 at 08:26

4

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

answered Oct 01 '17 at 08:26

wstudiokiwi

880
1
15
33

can you please share your config.xml – bCliks Dec 22 '17 at 12:16

score 1 · Answer 3 · answered Aug 01 '20 at 10:42

1

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!

answered Aug 01 '20 at 10:42

Nephylum Saracen

19
1

score 1 · Answer 4 · answered Jan 14 '21 at 08:46

Instead of disabling scrolling or forcing the removal of safe-area on the web frame, the better permanent fix is changing how Ionic stretches the app vertically on the screen. It should use a height: 100vh instead of height: 100%, per the findings in this thread: https://issues.apache.org/jira/browse/CB-12886

I have new information to add to this bug, and to reiterate it is not a Cordova bug. Let me present 3 scenarios:

viewport-fit=auto and CSS height: 100% on the body element:
UIWebView: The webview is the height of the device screen, minus the unsafe area, offset at the top by the unsafe area.
WKWebView: The webview is the height of the device screen, minus the unsafe area, offset at the top by the unsafe area.

viewport-fit=cover and CSS height: 100% on the body element:
UIWebView: The webview is the height of the device screen.
WKWebView: The webview is the height of the safe area, showing a gap at the bottom.

viewport-fit=cover and CSS height: 100vh on the body element:
UIWebView: The webview is the height of the device screen.
WKWebView: The webview is the height of the device screen.

In my main SCSS file, after importing Ionic, I've set:

html {
    height: 100vh;
}

score -3 · Answer 5 · answered Sep 21 '18 at 02:10

-3

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

answered Sep 21 '18 at 02:10

dap.tci

2,455
1
20
18

Ionic: White space in bottom with wkwebview in IOS 11

5 Answers5

Linked