WKWebView page height issue on iPhone X

Question

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.

Answer 1

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.