Model stretch after orientation change on IOS

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 link contain an iframe), this issue will not happen.

However, when you open the page from link in iframe) or 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 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.

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.

@dexter_deluxe Are you using the iframe published build or a non-iframe variant?

@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 :frowning:

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?

@yaustar yes, exactly

1 Like

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.

CSS changes and some modification of the __start__.js file.

At this point, I’m pretty much out of good ideas :confused:


@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. :sweat_smile:

I wouldn’t do any QA on it for the moment unless you need it right now until it’s ‘finalised’ :grimacing:

Browser stack also doesn’t handle landscape rotation the same as native hardware :frowning: