CODEWITHSUNDEEP
javascripthtmlaccelerometersensorsgyroscope
Ben Jackson
Ben Jackson

Reputation: 634

Device motion / motion detection on mobile browsers not working

I'm trying to build a site with a simple parallax effect. On a mobile I want this effect to be responsive to the device's orientation / motion. There's a fair amount of information online about using deviceorientation events and also using the generic sensor api. However, though working in Chrome on my device, these do not work on Safari or Brave.

I noticed that even the demos I've found that attempt similar things eg. Punchmeter, Parallax.js also don't work in Safari or Brave.

Is this kind of functionality no longer possible (presumably for security reasons). If so, when did this happen? A lot of the documentation doesn't seem to have been updated with this info. Finally, does anyone have any suggestions for a work around (is there a way to ask for permission to access the accelerometer)?

Upvotes: 0

Views: 3447

Answers (1)

Raphaël Balet
Raphaël Balet

Reputation: 8491

You're right, it worked before, and yes it's true, it isn't working on Safari anymore for a privacy reasons since the version 12.2 cause the Motion & Orientation Access is an opt in feature.

It also won't be fixed in the Parallax.js -> here is the issue that is talking about it.

So the only way you have to make it effectively works, is to ask the user to activate it, what "you might UX wise not want to ask the user for gyroscope settings just for enabling a purely aesthetic minor 'nice to have' addition" - Jonatan-r

If you still want to implement it, then you could try this code found here. But I didn't try it yet

  askPermission() {
    // feature detect
    if (typeof DeviceOrientationEvent.requestPermission === "function") {
      DeviceOrientationEvent.requestPermission()
        .then(permissionState => {
          if (permissionState === "granted") {
            window.addEventListener("deviceorientation", () => {});
          }
        })
        .catch(console.error);
    } else {
      // handle regular non iOS 13+ devices
    }
  }

To be notified : If it isn't working in other browsers like chrome, you have to be sure to try it https -> localhost won't work

Upvotes: 2

Related Questions