Issues handling mobile orientation

I am currently developing a web app using PlayCanvas that uses all that uses Elements (and no HTML) and have run into several issues on mobile.

The app is intended to run in portrait mode on mobile.

The ideal solution would be in my mind to lock the screen in portrait mode. But I understand that this is a problem on certain browsers. I’ve looked into the Screen.lockOrientation()/orientation.lock() and the Ponyfill o9n That allows orientation.lock() to work on more browsers. But I’m not even sure if this can work with PlayCanvas.

Failing being able to lock the screen to the portrait orientation. I would settle for displaying a message to the user to rotate the phone back to the portrait orientation. However different browsers seem to have different issues wrt to scaling once it’s completed a rotation. On Chrome a rotation to landscape back to portrait seems to keep the the image stretched to landscape only rotating it upside down again restores the correct dimensions. Safari doesn’t seem to do this as easily but some sequence of rotations seem to cause the same result or sometimes just rotation crashes everything entirely.

Chrome portrait

To landscape

Back to portrait

There is a post that seem to to refer to a similar issue

at the end of it suggests wrapping it in an iframe the avoid the stretching problem I tried this but it seemed to have no effect. Am i missing something?

As my project is private I have created a simple test app to demonstrate the stretching issue in Chrome

To replicate simply start the app in portrait mode rotate 90 degrees and then rotate back you should see something that looks like this.

Any advice on how to handle this would be much appreciated.

1 Like

Is this issue happening on iOS and Android or just iOS?

I think it’s only happening on iOS but I will need to double check. I wont’t have access to an Android device to test until tomorrow. Will update then.

Okay I’ve just be able to check with someone who could test on Android. And they’ve seen the same stretching behavior as well on Android.