VR mode on iOS 13.4.1 does not work

[dax72]

Gyroscope movement does not work, it works fine before ios13.4.1 update or without turning on vr mode.

• A-Frame Version: 1.04
• Platform / Device: IOS 13.4.1 - iPhone and iPad

[machenmusik]

Hi, can you try the branch in PR #4548 and see if that fixes it?

[dax72]

is there a dist ready to download?

[dmarcos]

I couldn't find any relevant changes on the Safari release notes:

https://developer.apple.com/documentation/safari_release_notes

[dax72]

I just tried on another iPad (iPad Pro 12,9""), v13.4.1...same problem! Motion sensor does not work when you click VR button.

[dmarcos]

We should probably disable cardboard / stereo mode on iPads

[dax72]

and on iPhone? currently I can confirm that it does not work on iPhone and iPad with iOS13.4.1.
VR mode on iPad has no sense..but on iPhone it's necessary

[kowalus23]

Got same issue, with my older iphone for tests with iOS 13.3 it does work properly, but newest 13.4.X it doesn't... as far as i checked DeviceMotionEvent.requestPermission() doesn't seem to work right, it asks about permission, right after with my app it reloads page and and my typical promise that checks if it's gyroscope or if the device support gyroscope it saying "false" for iPhone with newest iOS :/ previous version was ok.

Also checked with DeviceOrientationEvent, doesn't help :(

[dmarcos]

On iPad we can disable. On iPhone we can keep for now. What’s your audience? Can you share details on your application? We see Cardboard usage decline and harder and harder to come by. Polyfilled VR comes with a lot of issues like this one where things break when browser APIs and policies change.

[dax72]

We create VR games/apps for clients and they require iPhone compatibility

[dmarcos]

Is iPhone compatibility via Magic Window mode enough? Do you have any metrics of cardboard usage you can share?

[dax72]

Magic Window mode it's not enough, they need stereo mode.
I think the percentage of iPhone/cardboard is not relevant but clients require the compatibility iPhone/android and without it they do not market products.

Safari iOS from a development point of view is a nightmare because there is
no webVR/webXR support but for big companies it is not their problem, they want it to work on iOS too :(

[dmarcos]

@dax72 Thanks for the info. Is your client decision based on any audience metrics?

[dax72]

@dmarcos Unfortunately I don't have access to their audience metrics, but I have more clients that are asking to me to fix this iOS bug

[dmarcos]

@dax72 Are they willing to pay to fix the issue?

[andreyrd]

For what it's worth, this also affects magic window tracking, not just VR mode.

[andreyrd]

Ok, did some investigating. 🕵🏻‍♂️

This was a regression in Webkit, reported on 2020-03-31: https://bugs.webkit.org/show_bug.cgi?id=209831
And patched same day by the reporter: WebKit/WebKit@13e78b2

Unfortunately, considering that the changeset which introduced the bug was in December 2019: https://trac.webkit.org/changeset/253357/webkit
And the bug only showed up just now in 13.4.1, it seems it's gonna take a really long time to see the patch fixing it make it's way into iOS.

[dmarcos]

Thanks for investigating. Super appreciated. Magic window still works for me on examples:

https://aframe.io/aframe/examples/

it’s a different code path

[andreyrd]

Oh, interesting! That's probably because our team is currently stuck on 0.9.2 for other reasons, which is using the webvr-polyfill / device motion api for magic window?

So scratch that. Can confirm that on latest aframe, magic window is fine.

[dmarcos]

Since iOS 13, Safari requires permission to access DeviceMotion. 0.9.2 doesn’t have the request logic. It predates iOS 13

[andreyrd]

Yeah, we manually call DeviceMotionEvent.requestPermission(). Worked up until this bug. Same issue as VR mode in latest versions, lots of log spam TypeError: null is not an object (evaluating 'i.alpha') from webvr-polyfill.

[jwjordan]

Does this pull request fix what is needed for aframe to work properly with iOS 13.4 in cardboard mode? immersive-web/cardboard-vr-display#42
If so, what's the process for getting that incorporated? Does that PR have to get merged into immersive-web, and then immersive-web gets merged into a new point release for aframe?

[dmarcos]

@jwjordan Yes, best would be for that PR to merge and then for the webvr-polyfill to incorporate. A-Frame would pick a new version of the polyfill Alternative would be to maintain a fork of both repos that it's preferable to avoid.

[jsantell]

webvr-polyfill 0.10.12 now has the changes from upstream cardboard-vr-display

[dmarcos]

@jsantell Yeah! Thank you very much. Super appreciated. I bumped the polyfill on master.

[jsantell]

shout out to @jwjordan @ivnnv @machenmusik for the research & patches 🎉

[dmarcos]

Yeah. Thanks everybody 👏

[jwjordan]

Checked out master and tested in a VR model inside Ideaspace, and I can confirm this fixed the cardboard mode on the latest version of iOS (13.4.1) in my specific instance. Thanks a ton everyone!

[levmillr]

Awesome! When does 1.0.5 release? :)

[dmarcos]

It’ll be 1.1.0 in a few days depending on how QA goes. In the meantime you can use master builds

[levmillr]

Nice even better! I hope it goes well. Thank you @dmarcos and thankyou to everyone who worked on this

[andreyrd]

And of course...everything works just like normal again in iOS 13.5 beta 5 using 1.0.4...

[dmarcos]

Thanks for reporting

[NomisGnos]

I can confirm commit cd01cec works.

I assume commit a326ceb will continue to have this update.

[jgutierro]

Hello @dmarcos
I'm getting an error with the cd01cec version.
On this url you can see the error when you focus the pointer on the green marks

index.js:96 Uncaught TypeError: Cannot read property 'array' of undefined at TextGeometry.computeBoundingSphere (index.js:96) at H.raycast (three.js:11367) at Fa (three.js:46525) at Ba.intersectObjects (three.js:46600) at i.checkIntersections (raycaster.js:226) at i.tick (raycaster.js:198) at HTMLElement.tick (a-scene.js:719) at HTMLElement.render (a-scene.js:769) at bind.js:12 at m (three.js:25084)

With version 1.0.4 this doesn't happen, but VR is not working on iOS 13...

[NomisGnos]

@jgutierro that commit looks like it was moved to master. I get that same issue on master branch as well. You might want submit a new ticket or even take a look / revive #3318

[dmarcos]

Your issue seems unrelated to VR mode not working on iOS. Best to open a separate issue as @NomisGnos mentioned

[jgutierro]

Hello @NomisGnos and @dmarcos thank you for your answer. I know that commit is moved to master. But I replied here because I guess this TextGeometry error it's caused by this new fixed version for safari, because with the 1.0.4 version it's working fine.

[dmarcos]

@jgutierro I recommend opening a new issue or information will get lost. Make sure you provide a link to reproduce. Thanks!

[jgutierro]

Hello @dmarcos, if I try to insert on a iOS WebKit this url https://app.estudiocactus.com/clickandrender/ (it's the master commit aframe version cd01cec) is not working. Do you have any idea why? Because it's working fine if I open directly on safari

[jgutierro]

Hello @dmarcos and @NomisGnos I opened a new issue and finally was solved! #4618 (comment)

Thank you so much!