See the following screenshot:
Here is my project: PlayCanvas 3D HTML5 Game Engine
How can I solve this problem?
1 Like
Is it just iOS that is having this issueā¦ Looking on PC and Android, it looks fine, all the picture frames are square.
Thanks for your tips. Iāve tested on Android(smartisan os), and it does not have this issue too. So I think only iOS have this issue.
I also found something interesting about this issue.
When you open the page from https://playcanv.as/p/XXXXXX(the link contain an iframe), this issue will not happen.
However, when you open the page from https://playcanv.as/index/XXXXXX(the link in iframe) or https://launch.playcanvas.com/XXXXX?debug=true(the link in debug mode), this issue will happen.
Just wanted to confirm I still have this issue on iOS 11 as well. Safari causes stretching as shown at the top of the thread. On chrome itās even worse.
So Iāve done a little digging around the code. No fix for the stretching yet, but if anyone wants to dive in it looks like the functions responsible for orientation/scaling are in: engine/src/framework/application.js
the auto generated start.js calls resizeCanvas() which, in case of āfill windowā, calls setCanvasResolution(), which, interestingly, calls resizeCanvas() again.
innerHeight/Width and and what looks like a wrapper for css canvas.style.width/height determine what happens with the scaling.
just noticed this thread is a year old, but the problem is still hereā¦
Hmm, I know a workaround, just wrap your page into an iframe, like what playcanvas published page do.
We are experiencing this behavior as well
This is an issue that is currently being looked into. https://github.com/playcanvas/engine/issues/1853
Iāve got a workaround with the iframe less version but itās super untested. Still trying to find out more on a cross platform set of CSS rules.
@yaustar Thanks for your answer. We donāt use the āPublishā function, we create a build via API. The output should be quite the same as you would click āDownload ZIPā. Therefore itās a non-iframe variant.
@dexter_deluxe sorry about this, it has been difficult to work out a set a universal CSS rules that work on everything 
In the GitHub issue posted above, Iāve posted an style sheet that has worked well on my iPhone 5 and Pixel 2 XL device but has been untested on anything else.
If you do try, please let us know how you get on/if there are any issues.
1 Like
We experience the same behavior with iPhone 11
1 Like
Just to check, this was the set of style rules that were used? https://github.com/playcanvas/engine/issues/1853#issuecomment-645676110
Iāve now got a āworkingā solution for a iframe-less variant that uses a scroll hack to get around some craziness of the iOS browser. https://github.com/yaustar/ios-landscape-rotation-fun/tree/master/iframe
CSS changes and some modification of the __start__.js file.
At this point, Iām pretty much out of good ideas 
2 Likes
@yaustar Your solutions works great, at least on iPhone 11. I will test on other devices as well this week (send you our QA list via PM). When will the fix be applied (especially for API builds)? Do you have an estimate on that?
Edit: Iāve tested it with ādevicepixelratioā on and off. That would be also crucial to toggle between those 2 settings during development/testing, since it might f*** things up on iOS.
Itās such a hack Iām not sure itās the best solution. Iām going to see if I can get hold of a front end engineer to cross possible solutions now that I have a better ideal of whatās happening.
The testing plan for this scares me given the number of combinations. 
I wouldnāt do any QA on it for the moment unless you need it right now until itās āfinalisedā 
Browser stack also doesnāt handle landscape rotation the same as native hardware