WKWebView reports wrong size in Cordova iOS 6.1.0

[michaelhodgins]

Bug Report

Problem

After upgrading my iOS app to 6.1.0, there's about a centimetre of the screen at the bottom which the webview doesn't seem to extend to. I have a tab menu bar at the bottom of the app, and it's floating above the bottom of the screen. Nothing I do in the CSS allows me to move the tabs any lower in the screen, as though the webview just stops. However, if I background the app then foreground it again, the tabs are now in the right place and the blank part is no longer there.

When I execute $(window).height() initially after startup, this reports the screen height as 818px. After backgrounding and foregrounding the app, it reports 896px.

What is expected to happen?

The WKWebView should extend the full height of the screen.

What does actually happen?

The WKWebView seems to be missing 78 pixels.

Information

I can replicate in the HelloWorld app, so I think this may be a bug in Cordova iOS.

This is how I investigated. Firstly, in my app I removed all my JS, HTML and CSS, but I left jQuery in. When I open the app, $(window).height() reports 818px. After backgrounding and then foregrounding the app, $(window).height() reports 896px.

So, then I created a standard HelloWorld project:

cordova create hello com.example.hello HelloWorld cordova platform add ios@6.1.0

The only change I made to the helloworld app was to include jQuery. I then ran this on my iPhone XS Max and inspected the app from within my Mac's Safari. Again, $(window).height() reports 818px until I background and then foreground the app. After this, $(window).height() reports 896px.

Environment, Platform, Device

iOS 6.1.0. As far as I can tell, all iPhones are affected. For example, iPhone 8 Plus initially reports its window height as 716px, but then this changes to 736px after backgrounding and foregrounding the app.

Version information

Cordova CLI: 9.0.0 macOS 10.15.5 Xcode 11.5

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[engrsandeep]

i have encountered same issue, design also do not look same as UIWebView.

[giuseppelt]

Same issue, no plugin installed. The missing space is the height of the status bar.

[FelixMasse]

Same issue, backgrounding/foregrounding the app fixes it like mentioned

[lovelyelfpop]

Add some code in CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m

    // 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;

[ihebChaaraoui]

Same issue with ipad

[michaelhodgins]

I've hacked the Cordova source code as per @lovelyelfpop 's instructions, and this has fixed the issue in my own app, and the HelloWorld app.

[goutamreddy]

I can confirm both the problem, and this solution working in our app- thank you!

[lovelyelfpop]

If use viewport-fit=cover and body {height:100%}, the height of html body still can not reach the bottom, but the background-color of body can cover the fullscreen.

This happens at the first launch, after resume from background, the white space disappears. Or turn to landscape and back, the white space disappears, too.

Change height: 100% to height: 100vh fix the problem, but it may has other side effects.

[dpogue]

@lovelyelfpop On iOS, 100% is 100% of the safe area, and 100vh is 100% of the viewport height.

[helllamer]

@lovelyelfpop 's patch works ok.

But, if app in background, iOS change system language/region in settings - app need re-start, because of all magic rolls back, and invalid screen/viewport is here again.

[calrsom]

I use cordova-plugin-statusbar with <preference name="StatusBarOverlaysWebView" value="true" />. I ran into this bug after updating to cordova-ios 6.1.0. I incorrectly assumed it was an issue with the status bar plugin at first, since the content seemed to be starting below the status bar. However, the patch above fixed the issue for me, so I believe the webview was still positioned correctly, just the content moved down.

[calrsom]

Update on the issue I was seeing. It turns out the old version of cordova-plugin-googlemaps I was using was overwriting my viewport meta tag. I'm now seeing the positioning I expect with a viewport tag <meta name="viewport" content="viewport-fit=cover, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">. For those still experiencing an issue here, take a look at options from the markup side.

[Masterxiechengxun]

I have the same problem. It's going to display properly in UIWebview.

[Masterxiechengxun]

Add some code in CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m

    // 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;

Thank you! Solved my problems perfectly.

[21pg]

@lovelyelfpop Thank you so much !!! it resolved my issue.. #1044

But Why there is no PR for this ...

[timbru31]

We have said multiple times why we will not add nor accept a PR: https://github.com/apache/cordova-ios/issues/905#issuecomment-660514528

[lovelyelfpop]

Maybe add a new to control it's behavior? Let us decide if use it or not

[dpogue]

Maybe add a new to control it's behavior? Let us decide if use it or not

That control already exists in the HTML meta viewport tag, as viewport-fit=cover.

When you specify that in your page, WebKit internally sets UIScrollViewContentInsetAdjustmentNever.

via https://github.com/WebKit/WebKit-http/blob/817c46e152af795d735678386db68805d0aa505e/Source/WebKit/UIProcess/API/ios/WKWebViewIOS.mm#L2336-L2349 via https://github.com/WebKit/WebKit-http/blob/817c46e152af795d735678386db68805d0aa505e/Source/WebKit/UIProcess/API/ios/WKWebViewIOS.mm#L2499-L2504 via https://github.com/WebKit/WebKit-http/blob/817c46e152af795d735678386db68805d0aa505e/Source/WebCore/page/ViewportConfiguration.cpp#L511

[lovelyelfpop]

We've already set viewport-fit=cover, but there is still white space at the first launch, after resume from background, the white space disappears. Or turn to landscape and back, the white space disappears, too.

If use viewport-fit=cover and body {height:100%}, the height of html body still can not reach the bottom, but the background-color of body can cover the fullscreen(so it's a body backgroundColor space rather than a white space).

Change height: 100% to height: 100vh fix the problem, but is has other side effects.

Tha's why we need a new preference to control it, viewport-fit=cover is not we need.

[dpogue]

height: 100vh is the correct way to fix the problem

[nesbtesh]

Is there a way to remove the space above and below the app. I have viewport-fit=cover and 100vh none of the solutions worked

[lovelyelfpop]

I write a plugin for cordova-ios@6+ to solve this issue https://github.com/lovelyelfpop/cordova-plugin-wkwebview-inset-adjustment-never