window.innerWidth/Height not updated in resize handler in WKWebView

Question

I have some fullscreen web content that I update when the window changes size using the resize event.

window.onresize = function()
{
    var width = window.innerWidth;
    var height = window.innerHeight;
    ...
}

This works fine in the Safari app but it is not working in a WKWebView. It is giving me the wrong window dimensions when the device changes screen orientations on both iPhone and iPad in a WKWebView.

Specifically for iPad I am showing the web view in a navigation controller. When I switch to portrait mode I get (768x768) dimensions instead of (768x960) which are the correct dimensions.

Is there a workaround to this issue?

Answer 1

It seems like window.clientWidth / window.clientHeight don't get updated before the resize event fires.

I found two solutions to the issue:

• use document.documentElement.clientWidth instead of window.innerWidth
• listen to the orientationchange event instead of the resize event (window.clientWidth seems to be already updated at this point)