WKWebView CSS rendering problems on screen rotation

Question

First of all everything works perfectly on UIWebView on all possible iOS versions so this is a specific WKWebView issue.

After I've completed the implementation of WKWebView I bumped into a massive graphical bug/issue. In portrait my application works fine but when I rotate it to landscape something strange happens, my header and footer are not rendering correctly.

If I look into my webcode I can see that the CSS width is getting updated in the DOM with the correct data but I can only see the width of portrait orientation ( 320px ) of the header/footer even though it reads style=“width: 568px;” in the DOM.

I'm using positioning:fixed but if I'm changing to positioning:relative it renders as expected on screenrotation (unfortunately relative positioning isn't an option in this case). If I click on the header/footer or scroll somewhere on the screen the header and footer somehow updates and renders correctly and are shown as expected (only requires 1px of scrolling).

I will try to illustrate how it looks like.

Red = Visible
Blue = Invisible (even though it's there and events launches on click/scrolling).

Anyone experienced this issue before and got a solution?

Answer 1

Not the best fix but here's a work around. It looks like WKWebView doesn't invalidate it's content on rotation changes but does invalidate it on scroll (see here: https://github.com/WebKit/webkit/blob/master/Source/WebKit2/UIProcess/API/Cocoa/WKWebView.mm#L1430). Since scrolling will invalidate it and force the CSS to re-render you could do something like this:

extension WKWebView {
    func invalidateVisibleRect() {
        let contentOffset = scrollView.contentOffset
        scrollView.setContentOffset(CGPoint(x: contentOffset.x, y: contentOffset.y + 1), animated: true)
    }
}

You could use that for now until the radar gets fixed.

UPDATE:

Supposedly this behavior will be fixed in iOS 9.