Orientation and screen squish


I’ve gone through the various older posts on a similar subject, but seem unable to find a working solution.

When changing orientation on safari on iOS the screen canvas doesn’t properly adjust, and results in a ‘squished’ canvas (when using FillWindow and Auto Resolution). It seems like on Safari it doesn’t account for the browser header/foot correctly when calculating the window height after orientation change? It does seem to correctly get the dimensions if refreshing/reloading the whole window.

Any idea on workaround?

This is due to the window width and height changing after the orientation and resize events on iOS Safari. I can’t reproduce this on iOS 14 but I assume it is related.

The way I’ve seen to get around it is to force a DOM reflow a few times after the orientation change as seen here: https://github.com/yaustar/yaustar.github.io/blob/master/ios-cover/__start__.js#L56

It can be added as file in project like so: https://playcanvas.com/editor/scene/1153495

If using the publish build link, please use the iframeless version where an /e is added before the /p

eg https://playcanv.as/p/eFAeNR4O/ -> https://playcanv.as/e/p/eFAeNR4O/

There’s a bunch of fixes/workarounds/refactor that I’m intending to do over the next month or so related to this type of thing.