Parallax no longer working with iOS 12.2 — Safari

[didacus]

I just realised the effect is not working on Safari iOS 12.2. Tested on iPhone XR and iPad Mini 3. Can anyone replicate that?

[neajul]

same...

[reneroth]

Error messages would be helpful, don't have all too much time currently.

[didacus]

I don't think there are any. It is something with Safari. I tested on Chrome on both devices described above and the effects still work, therefore I assume the issue is coming from the new iOS update.

[neajul]

I only have Simulator which doesn't allow you to test gyroscope features but am receiving no messages in the console at all. Tested on iPhone 7, iPhone X and iPhone 6. Works fine on older iPhone (12.0.1)

[reneroth]

No error message makes things harder. I can try and test some things out this weekend, but no promises. It's always Apple causing the most work with this library :/

[didacus]

@reneroth Understandable dude. If I had the skill and knowledge I would try to help.

[neajul]

https://www.macrumors.com/2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/

The upcoming software update also introduces a new Motion & Orientation Access toggle under Settings > Safari > Privacy & Security. Toggled off by default, this new setting must be turned on in order for websites to display features that rely on motion data from the gyroscope and accelerometer in the iPhone, iPad, and iPod touch.

=/

[didacus]

I can confirm that activating the feature described above solves the issue — iPhone XR iOS 12.2 This is a real bummer.

[neajul]

probably moves this in the "unfixable" category though.

[reneroth]

Yup, but the Readme will need adjusting. Maybe there is a way to detect this feature and prompt the user to activate.

[neajul]

W3C thread about prompting users to give permission (doesn't seem to be working as of yet): w3c/deviceorientation#57

[mradzwilla]

This code my be a bit specific to my project, but as a workaround to this change I've used the following to implement a fallback if the user's gyroscope is disabled:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  //Mobile
  gyroCheck = setTimeout(() => initFallback(), 500); //Init gyroscopeless mobile view
  window.addEventListener('deviceorientation', initGyroscope);
   } else {
     var scene = document.getElementById('scene');
     var parallaxInstance = new Parallax(scene);
   }

 function initGyroscope(){
    clearTimeout(gyroCheck);
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene);
    window.removeEventListener("deviceorientation", initGyroscope)
  }

 function initFallback(){
   //Whatever you need to do here
}

[gitguys]

@neajul I looked through that thread and got lost. Does iOS now show a prompt for access to the gyroscope when needed by a site?

@mradzwilla What does your fallback do?

[mradzwilla]

@gitguys Mine just adds scrolling parallax on individual items so they transform as the user scrolls. It's not the same as with the gyroscope, but it still gives the feel that items are floating.

	function initFallback() {
		$(document).scroll(function() {
			evalObjects();
		});

		function evalObjects() {
			var d = ($(document).scrollTop() + $(window).height() - $('#get-excited').offset().top);
			var speed = d * .1

			$('.dice-2 img').css('transform', "translateY(" + speed + "px)");
			$('.wheel img').css('transform', "rotate(" + Math.round(speed / 2) + "deg)");
			$('.ace img').css('transform', "translateY(-" + speed + "px)");
			$('.coins img').css('transform', "translateY(-" + speed + "px)");
			$('.cards img').css('transform', "translateY(-" + d * .05 + "px)");
			$('.dice-1 img').css('transform', "translateY(" + speed + "px)");
		}
	}

[gitguys]

@mradzwilla thank you for the explanation. This link below is apparently a working demo to prod iOS users to turn on access to the gyroscope, I think?

https://elegant-dryosaurus.glitch.me

Found it here in comments - https://medium.com/p/74fc9d6cd140/responses/show

I don't have access to iOS 10.3, are you able to see if it works and could be implemented with Parallax?

I've also noticed the paralax demo site circular info button doesn't work with Firefox on Mac nor Windows for a long time now. Is that an easy fix or is it sometihng to do with Parallax at its core somehow?

http://matthew.wagerfield.com/parallax/

The circular info button works with every other browser all all platforms, but not Firefox.

[montali]

Hi everyone!
I'm reviving this old issue cause I've had the same problem in the past and managed to solve it.
iOS requires you to get the DeviceOrientation permission in order to work with the gyroscope. This permission cannot be asked by default, but the user has to click somewhere.
So, the solution I've found is putting a 100%/100% canvas over everything else and asking the permission on clicks over that.
This is the code I've used in a WP website with jQuery (the first time I ran into this issue)

var canvas = document.getElementById("c");
canvas.onclick = function() {
  var recanvas = document.getElementById("c");
  recanvas.onclick = function() {
    return false;
  };
  askPermission();
};
function askPermission() {
  if (typeof DeviceMotionEvent.requestPermission === "function") {
    DeviceOrientationEvent.requestPermission()
      .then(response => {
        if (response == "granted") {
          window.addEventListener(
            "deviceorientation",
            onDeviceOrientationChangeEvent,
            false
          );
          location.reload();
        }
      })
      .catch(console.error);
  }
}

and this is the React adaptation I'm using right now:

  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
    }
  }

  render() {
    // We'll need two divs at 50% vw and 100% vh, margin 0, fixed position
    return (
      <div className="App">
        <canvas
          className="fullScreen"
          ref={el => (this.canvas = el)}
          onClick={this.askPermission}
        />
</div>);
}

Hope I've helped somebody out!

[Jonatan-r]

So since it doesn't work on iOS unless getting permission, and as some might UX wise not want to ask the user for gyroscope settings just for enabling a purely aesthetic minor "nice to have" addition perhaps an option should be built to make the plugin not respond to the gyroscope but to touch or scroll on iOS? @reneroth

Thanks for a really nice plugin otherwise! Works seamlessly on android and so easy implementation. A shame Apple has made the gyroscope permission locked.

Best,
Jonatan

[Jonatan-r]

@reneroth? 😄

[reneroth]

added information to readme at least :)