使WKWebView覆盖整个屏幕

Question

I have a WKWebView that I want to cover the whole screen. On newer devices that doesn't have a physical home button, iOS adds a white area under the "homebar". I've tried to override the safeAreaInsets witch works fine to make the content to go under the "homebar", but id like to keep the top parameter to its default value. This is since I have a navigation bar at the top witch can be hidden or shown. Setting UIEdgeInsets(top: 0... makes the WKWebView go behind my navbar (obviously).

Is there anyway to only override left , bottom and right ?

import Foundation
import WebKit

class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Thanks!

Answer 1

Can't you solve this using autolayout, by pinning the webview to either the superview or the safe area, depending on what you want?

Anyway, you could probably do something like this:

override var safeAreaInsets: UIEdgeInsets {
    let insets = super.safeAreaInsets
    return UIEdgeInsets(top: insets.top, left: 0, bottom: 0, right: 0)
}

Answer 2

I wouldn't recommend overriding the safeAreaInsets of any UIView directly as it might lead to unexpected behaviours as the one you mentioned yourself.

These safeAreaInsets are generated on a higher UIViewController level, and therefore should be dealt there.

I would rather advise doing as follows:

Add this code to the UIViewController that will hold your FullScreenWKWebView .

 override func viewWillLayoutSubviews() {
     super.viewWillLayoutSubviews()

     additionalSafeAreaInsets.bottom -= bottomLayoutGuide.length
 }

This way you will preserve the original UIViewController 's safeAreaInsets and simply add the desired modifier for the original. Allowing for modification at any stage.

Answer 3

So i figured it out, and boy, I was wrong. Turns out it wasn't an issue with the constraints but how WKWebView render pages in safe areas. I figured out that my WKWebView covered the whole screen but didn't render the background under the home bar/notch. The dark green color is defined in html.

My solution to the problem was to disable WKWebViews bultin adjustment.

webView.scrollView.contentInsetAdjustmentBehavior = .never

I also created two top constraint for my WKWebView with different priorities. One to safeArea and one to superView. Then I change the priorities in code when the navbar is visible so that the page doesn't render under the navbar.

Result: With constraints to superView

With constraints to safeArea