WKWebView overlapping status bar in iPhone XR

Question

I have a WKWebView view in my App, which renders content developed in Ionic framework. Seemingly all Apple devices except the X models (which have a taller status bar) behave well with no overlapping the status bar. But the "X" models have a problem.

I have set its constraints as:

Interface builder constraints image

However, the result is that these constraints are not being enforced, when the modal window shows up it extends beyond the status bar boundary in both the iPhone XR, X, XS simulator and physical device, making it almost impossible to access the "exit out" button to close the modal window.

App displaying issue

Could it be a problem in the Ionic code itself, or is it more something like I have to fix in XCode somehow?

I have looked at: UIWebView show overlapping status bar in ios-11, iPhone-X, Xcode-9

But it seems that trying to adjust the view programmatically is not working, as I tried to add this code in loadView() and viewDidLoad() of my ViewController to no avail (I get ERR BAD ACCESS when trying to find the frame height of the view in order to adjust it in relation to the StatusBar) - iOS 13, Swift 5:

override func loadView() {
    
    let webConfiguration = WKWebViewConfiguration()
    
    #if false
    
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    #else
    
    //First, let's find out the height of the status bar, so we don't invade it.
    let winScene = UIApplication.shared
                    .connectedScenes
                    .first
    
    let windowScene = winScene as! UIWindowScene
    
    let sbHeight = windowScene.statusBarManager?.statusBarFrame.height
    let heightTotal = view.frame.height + sbHeight!
    
    webView = WKWebView(frame: CGRect( x: 0, y: heightTotal, width: view.frame.width, height: view.frame.height - sbHeight!), configuration: webConfiguration )

    #endif
    
    webView.uiDelegate = self
    view = webView
    
       }

Running out of ideas, so any tips are appreciated.

Answer 1

Add constraints like this:

Use the following code in the ViewController:

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"https://www.apple.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

So remember to add the WebKit framework:

This way I get the view correctly using iPhone 11 Pro simulator.