CODEWITHSUNDEEP
ioscssios11wkwebviewiphone-x
WATER1350
WATER1350

Reputation: 141

WKWebView page height issue on iPhone X

I find that if I use WKWebView with 

viewport-fit=cover

and 

body :{height:100%}

the height of html body still can not reach the bottom of iPhone X and is equal to the height of safeArea, However, the background-color can cover the fullscreen.

https://ue.qzone.qq.com/touch/proj-qzone-app/test.html

I load this page in a fullscreen WKWebView to reproduce the problem.

Upvotes: 13

Views: 15078

Answers (5)

RDJ
RDJ

Reputation: 81

You need to set UIEdgeInsets for your web view to stretch all the way to bottom (covering the notch).

You can achieve this by creating a subclass of WKWebView!

Check this out.

Upvotes: 0

Adam Heath
Adam Heath

Reputation: 4753

I found setting height in CSS on the html element to be height: 100vh (rather than height: 100%) worked

Upvotes: 12

Sampo
Sampo

Reputation: 5048

I was able to fix the issue with (ObjC / Swift):

if (@available(iOS 11.0, *)) {
  webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

or

if #available(iOS 11.0, *) {
    webView.scrollView.contentInsetAdjustmentBehavior = .never;
}

This setting seems to have the same effect as viewport-fit=cover, thus if you know your content is using the property, you can fix the bug this way.

The env(safe-area-inset-top) CSS declarations still work as expected. WKWebView automatically detects when its viewport intersects with blocked areas and sets the values accordingly.

Documentation for contentInsetAdjustmentBehavior and its parameter values and kudos to @dpogue for the answer where I found the solution.

Upvotes: 26

Michael Sibley
Michael Sibley

Reputation: 44

I cam across this issue in my Cordova app.

Samantha's solution worked for me to an extent but having a height of 812px set in the html tag was causing issues whilst in landscape and with other devices. Eventually I found that targeting just the iPhone X sized screen with css media queries for both landscape and portrait did the trick.

The width and height pixel values needed to be declared as important in order for the iPhone to accept them.

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait) { 
        html {
            height: 812px !important;
            width: 375px !important;  
        }
    }

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape) { 
        html {
            width: 812px !important;
            height: 375px !important;
        }     
    }

Upvotes: 0

Samantha John
Samantha John

Reputation: 978

In your code, if you add

opacity: 0.5;

to the html and body tags you'll see that the body tag does take the full screen while the html tag height is only as tall as the safe area.

If you just want the html area to reach the edges you can explicitly set:

<html style='height: 812px;'>

This will make the content within the html properly fit the full screen as long as you also add:

<meta name="viewport" content="initial-scale=1.0, viewport-fit=cover">

Not the most elegant solution of course, but it does work.

Upvotes: 1

Related Questions