Iphone iOS 12.2 will disable gyroscope access by default

Discussion
1

Over the last few weeks, it has come to my attention that the latest iOS 12.2 update will have disabled gyroscope and accelerometer input by default.

The reason is that it leaves users vulnerable to keylogging. Some Harvard students describe how they can use accelerometer/gyroscope data with machine learning to estimate what keys you’re pressing on your mobile device.

This imposes a big barrier for users to experience gyroscope-enabled 3D experiences, such as the Three.js DeviceOrientation example, since we would need to ask the user to go to Settings > Safari > Privacy & Security > Enable motion & orientation access.

This may be old news for some, but I thought it was important to point out, since so many of our mobile-based projects rely on gyroscope data for interaction. It might behoove us all to go back and update our live projects accordingly.

2 Likes
2

My team’s phone just auto-updated to 12.2 and our three.js web app immediately broke.
One of them has tried enabling motion and orientation access, to no avail.
Anyone else?

3

Well, what’s the problem? Is it not rendering at all? Are you getting any console errors? Is the orientation event the only thing that’s not working?

4

Good questions. I don’t have direct access at the moment, but I can see from a video that the app appears to be working as it would if there were no gyroscope (as it does on desktop).

5

Apparently we’re getting no errors, but we are seeing new warnings (I’m not 100% sure the second is new):

My colleague enabled motion & orientation, and restarted their phone:

6
  1. Oh, that looks like the new OS only lets you access device orientation events if you’re connecting via https and not through http! That’s another big blow to backwards-compatibility. (This is news to me, since I haven’t installed iOS 12.2 yet.) Have you tried using https?
  2. Your texture is probably too big for that iPhone. If you visit http://webglreport.com/ with that device, you’ll see that it probably has a max texture size of 4096, so Three.js is doing you the favor of scaling it down. It’s no biggie, but could be optimized for mobile, since you’re transferring data that’s not being used.
1 Like
7

HTTPS fixes it!
(at least in combination with the safari setting)
Thanks marquizzo.

8

Looks like nowadays you have to request user access in Safari iOS before receiving any gyroscope data with:

DeviceMotionEvent.requestPermission().then(response => {
    if (response == 'granted') {
        console.log("accelerometer permission granted");
        // Do stuff here
    }
});

Learned from this article by Andy Kong.

1 Like