Orientation change is not giving proper window height and width in PWA when launched from home screen icon in iPhone

Question

Used sample html along with PWA. Added the app to home screen using safari in iPhone.

In browser whenever there is an orientation change I am able to get the proper window inner height and width, whereas in app that is launched form the home screen icon it doesn't give the changed width and height immediately in the orientation change callback.

Can someone help me with this?

Device: iPhone 12 safari

Answer 1

It seems to be a bug in Webkit browsers: https://bugs.webkit.org/show_bug.cgi?id=170595

Someone suggest:

To avoid creating a new element, The following workaround seems to work fairly well for me:

For non-Safari, get the layout viewport size from document.documentElement.clientHeight (& Width).

Unfortunately, Safari's documentElement size does not update when the URL bar hides so I couldn't just apply it to all Webkit browser, but this bug just doesn't happen to Safari.