Rotating on iPhone12 Pro, gap between the iframe Youtube and div tag

Help & Support
,
1

I display it on safari on iPhone 12 pro (iOS15.5) and rotate it,
it seems that there is a margin in the iframe and div camera.

You can check the behavior with the following Editor and the actual iPhone 12 pro.

https://playcanvas.com/editor/scene/1538425

I tried adding a correction value to the innerHeight value of the resize function, but it didn’t seem to fix it well.

        function onWindowResize(){
            self._width = window.innerWidth;
            self._height = window.innerHeight;
            self._widthHalf = self._width / 2;
            self._heightHalf = self._height / 2;
            self._stageElement.style.width = self._width + 'px';
            self._stageElement.style.height = self._height + 'px';
            for(var i = 0;i < self._cameraElements.length;i++) {
                self._cameraElements[i].style.width = self._width + 'px';
                self._cameraElements[i].style.height = self._height + 'px';
            }
        }
        onWindowResize();
        window.addEventListener("resize", onWindowResize, false);

Any suggestions on how to fix this?

2

Yes, this is a known issue that I haven’t found a fix for and since removed that tutorial for using iframe ‘planes’. (amongst other issues)

I believe it’s related to the CSS transform calculations and how iOS treats the values but haven’t tracked down the specific issue.

If you do find the solution, it would be great to share it here :slight_smile:

2 Likes