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
https://forum.playcanvas.com/t/model-stretch-after-orientation-change-on-ios/4291/5
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
https://launch.playcanvas.com/793190?debug=true
https://playcanvas.com/editor/scene/793190
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.