Rotating screen in Safari 17.1 results in distorted visuals

[Alessioforlante]

trafficstars

I have updated two of my devices to iOS 17.1.1, which includes a new Safari version (17.1) and now rotating the phone screen with screen lock off results in distorted visuals, in both my game and the ones tested on the off A-Frame website. Firefox on the same phones seems to work correctly.

• A-Frame Version: 1.5.0 and 1.4.x tested, maybe more
• Platform / Device: Safari 17.1 iOS 1.7.1, iPhone SE
• Reproducible Code Snippet or URL: https://aframe.io/aframe/examples/showcase/dynamic-lights/

[dmarcos]

haven't updated to iOS 17 yet but on iOS 16 this works as expected. Perhaps a Safari regression? Screen resizing has been always a source of trouble in iOS with quirks, bugs and always changing logic.

[dmarcos]

I tried on iOS 16.7.2. Also would be useful to elaborate on what you mean by distorted.

[Alessioforlante]

For some reason I can't seem to manage to take a screenshot, so this photo of the phone will have to do - everything seems to be squished vertically as if you took a 16:9 image and tried to fit it into a 9:16 box. it also looks broken when rotated vertically. Let me know if this is clear, otherwise I'll try to get some better images tomorrow

[dmarcos]

Can't tell much from the image. You also mentioned the example https://aframe.io/aframe/examples/showcase/dynamic-lights/ It there distortion there as well? Taking screenshot with Power + Volume Up not working?

[dmarcos]

Can you reproduce on iOS 16?

[Alessioforlante]

Before updating to this latest version, everything worked perfectly on iOS as I've been working with it for months. This only started the minute I updated version. This happened to other people I'm working with also. I'm attaching a video that should hopefully make the issue clear

https://github.com/aframevr/aframe/assets/46829539/c88801b6-1acd-4e51-b8d3-a22cd1d37a67

[dmarcos]

Seems behavior of Safari for iOS 17 has changed. A bug or deliberate I don't know. We have to figure out what it is.

[dmarcos]

By the way some stretching is expected in landscape orientation. Same fov stretched on a wider viewport. might wanna check for orientation changes and change the camera to a wider fov.

[Alessioforlante]

Hello, any updates regarding to this matter?

[Kershawj]

Hi, I'm experiencing exactly the same thing - defo general Safari iOS 17 issue - Not happening on iOS 16 Issue first seen iOS 17.1.1, also 17.1.2. I was hoping iOS 17.2 would fix whatever they have changed but unfortunately not. I did also try resetting FOV on scene camera based on detecting "orientationchange" but that didn't help. Does indeed seem Safari behaviour has changed somehow? This can also seen to happen using the Xcode simulator (iPhone 15 iOS 17.2) If I can help in anyway with testing or the investigation let me know. Thanks Fingers crossed for 17.3!

[jcampbell013]

Hi guys, I was having this same problem and I found a solution that's worked for me. give it a try:

function isIOS() { return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; }

function resizeAFrameScene() { var scene = document.querySelector('a-scene'); if (scene && scene.renderer) { // Update the renderer size scene.renderer.setSize(window.innerWidth, window.innerHeight);

    // Update camera aspect ratio if necessary
    if (scene.camera) {
        scene.camera.aspect = window.innerWidth / window.innerHeight;
        scene.camera.updateProjectionMatrix();
    }
}

}

if (isIOS()) { window.addEventListener("orientationchange", function() { // Delay the resize for iOS Safari setTimeout(resizeAFrameScene, 500); // Delay can be adjusted as needed }); } else { // For non-iOS browsers, handle resize immediately window.addEventListener("resize", resizeAFrameScene); }

[dmarcos]

@jcampbell013 thanks. if you want to open a PR it will be super appreciated

[Alessioforlante]

What timing! I just found the same fix hours ago and was waiting to test it on more devices to make sure it did work. "setTimeout(resizeAFrameScene, 500);" is the only thing that needed change. I tried different values and 400 is the lowest number that works on all devices i have tried (iPhone mini on 2 different iOS versions, iphone SE (the latest one) and iPad 9)

[mrxz]

There are currently two iOS specific workarounds in A-Frame related to orientationchange/resize:

• ios-orientationchange-blank-bug.js
• a-scene.js#L156-L166

Especially the delayed resize in a-scene seems quite similar to the above workaround. I'm wondering if it isn't simply a matter of increasing the timeout delay and/or listening to the orientationchange event. Can't test it myself since I don't have any iOS at hand.

[dmarcos]

Those timeouts are very unreliable. Would be great to find more robust solutions. On the referenced stack overflow question there's a meta tags solution for one of the issues that it's worth testing

[mrxz]

@dmarcos A-Frame already inject those meta tags (metaTags.js#L5). So either it does not work (anymore?), or we can get rid of one of the two iOS-specific timeout workarounds.

Since all of these issues seem to boil down to incorrect size directly after a resize or orientationchange event, I'm wondering if a ResizeObserver would work. Assuming the observer would only trigger once the element actually resizes and not pre-emptively :thinking: