WKWebView incorrect content width in landscape with safe area

Question

This is how it looks: Maximally simple code to reproduce:

#import "ViewController.h"
#import <WebKit/WebKit.h>

@implementation ViewController

- (void)loadView
{
    WKWebView* webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:[[WKWebViewConfiguration alloc] init]];
    self.view = webView;

    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://apple.com"]]];
}

- (UIInterfaceOrientationMask)supportedInterfaceOrientations
{
    return UIInterfaceOrientationMaskLandscape;
}

@end

This happens only to the websites with viewport-fit=cover set. If you open same websites in Safari, you can see that first draw frame has the same problem, but it instantly resizes correctly after.

This happens only when launched in landscape. Rotation to portrait and back to landscape fixes this. Even minimizing app and opening it again fixes this.

So is there anything I can do from code to force it fix itself? I've already tried calling setNeedsLayout and layoutIfNeeded to whole WKWebView tree. Setting scroller insets will make content look like it doesn't have viewport-fit=cover set. This happens on iOS 12 and 13 (tested) and iOS 13 Simulator.

Answer 1

It is not the perfect solution but I managed to fix this by adding the webView as subView to self.view and add constraints to superview instead of safeArea to get the same effect.

Solution:

• Connect trailing constraint to a variable
• Set constraint isEnabled to false in viewDidLoad (to optimize check for deviceOrientation)
• In function webView(WKWebView, didFinish: WKNavigation) set constraint isEnabled to true

• Don't forget to register to navigationDelegate of the webView

  @IBOutlet var mainWebView: WKWebView!
  @IBOutlet var trailingConstraint: NSLayoutConstraint!
  
  override func viewDidLoad() {
      super.viewDidLoad()
  
      let orientation = UIDevice.current.orientation
      if orientation == .landscapeLeft || orientation == .landscapeRight {
          trailingConstraint.isActive = false
      }
  
      mainWebView.navigationDelegate = self
      mainWebView.load(URLRequest(url: URL(string: "https://apple.com")!))
  }
  
  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
      trailingConstraint.isActive = true
  }