wagerfield/parallax

Parallax with gyroscope not working on mobile

tiagocrt opened this issue · 11 comments

tiagocrt commented

I'm trying to use the parallax effect and it works fine with mouse moviment. But on mobile the parallax effect with gyroscope is not working. But the thouch effect works thou.
Tested in google Chrome (android) and Safari (iOS).

Link to the project exemple - http://virtualize.no-ip.org:8088/scifi

I'm using the minimal setup:
var scene1 = document.getElementById('scene1');
var parallaxInstance = new Parallax(scene1);

carcalvo commented

I have the exact same issue. Few days ago my code was working fine on mobile, but now is not and I haven't change anything.
Also when enter to http://matthew.wagerfield.com/parallax/ it works only when I touch the screen.

  • 👍1
eduoliveira85 commented

I have the exact same issue. Few days ago my code was working fine on mobile, but now is not and I haven't change anything.
Also when enter to http://matthew.wagerfield.com/parallax/ it works only when I touch the screen.

Same here, partially. On Android systems it seems to be true, but on iOS everything is seems ok for now.

  • 👍2
ilbuonteo commented

I have the exact same issue. Still no news?

ArturGuedes commented

Actually, this is not a issue. To use hardware resources through the browser, you need a domain secure with SSL.

If you are using a local environment use ngrok to create a tunnel and then go to the path created with https

e.g:
https://qwert1234.ngrok.io

  • 👍8
etiennedupuis commented

Same problem here. Quite frustrating because it specifically says it works with mobile on the homepage:

[...] parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... [...]

reneroth commented

I'll provide you with a full refund if this proves too frustrating 🙂

There are two problems at play right now:

  • gyroscope data is only available on SSL
  • recent iOS versions moved the permissions for Safari accelerometer into the Settings app

Nothing I can do about this except update this repo's Readme, as I don't have access to the showcase homepage.

  • 👍9
zandergrin commented

@reneroth as you can't update the showcase - is there a working demo somewhere?

Thanks!

kirkone commented

@reneroth as you can't update the showcase - is there a working demo somewhere?

Thanks!

just add a s to the url:
https://matthew.wagerfield.com/parallax/
As mentioned above this will only work for https pages

SkyWriter commented

https://matthew.wagerfield.com/parallax/ no luck on iOS 13.5.1 iPhone X. Neither Chrome, nor Safari uses the gyro.

Quick Googling seems to reveal that this is due to Apple changing the way they handle gyro permissions in iOS 13. The demo didn't ask for any of those permissions, hence doesn't have a way to interact with the gyro.

This seems to be a reasonable article on how to do it: https://medium.com/flawless-app-stories/how-to-request-device-motion-and-orientation-permission-in-ios-13-74fc9d6cd140 .

Quotes from there (in case the article's gone):

Here’s the code for devicemotion events:

DeviceMotionEvent.requestPermission()
.then(response => {
  if (response == 'granted') {
    window.addEventListener('devicemotion', (e) => {
      // do something with e
    })
  }
})
.catch(console.error)

And the equivalent for deviceorientation events:

DeviceOrientationEvent.requestPermission()
.then(response => {
  if (response == 'granted') {
    window.addEventListener('deviceorientation', (e) => {
      // do something with e
    })
  }
})
.catch(console.error)

Hope this helps lonely Googlers like me.

  • 👍1