[SOLVED] Canvas Scaling Issue on iOS 12

[Jake_Johnson]

Hey all,

My team and I have been testing some PlayCanvas apps getting iFramed into a parent website. The playcanvas instances are set to keep their aspect ratio, but on iOS 12 playcanvas gets sized up dramatically. I made an example project to showcase the issue.

The project: PlayCanvas 3D HTML5 Game Engine
An example that iFrames it in: https://dev8591.d30jum3lh3vqao.amplifyapp.com/

We have been able to reproduce the issue on browserstack and on physical phones. It does not occur on iOS versions above 12. One work around is to open the iFramed document, and delete its pixel styling like in this video below. This fixes the issue for that session but obviously if you refresh that page it reverts to the original issue:

Does anyone have any ideas on what could be causing this? It seems to be affecting the size of the parent iFrame though that doesn’t seem like it should be possible. Thoughts?

Thanks in advance,
Jake

[Kulodo133]

The style attribute on the iframe is style="height:600px;width:800". Should the width be 800px?

[Jake_Johnson]

Yes it should my bad, but that does not fix the issue. That is just a little typo I made while I was making the project public. Thanks for pointing that out though, it is now fixed in the link above.

[Kulodo133]

You may have already tried but it seems others on stackoverflow have had issues with ios iframe expanding the iframe size to fit the content. There are some suggestions there https://stackoverflow.com/questions/34320046/iframe-height-issues-on-ios-mobile-safari

[Jake_Johnson]

There was a fix in there. Thanks so much man.