requestAnimationFrame problems on safari

programming
1

Hi there, been following the tutorials for smooth parallax scrolling and running into issues in safari. Im targeting a div which is placed absolutely within it’s parent. Any help would be greatly appreciated!! Here is the js snippet which is a mixup of two of Kirupa’s YouTube tutorials…

var xScrollPosition;

var yScrollPosition;

var selectedImage = document.querySelector("#selectedImage");

var requestAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos +", " + yPos + "px, 0";
}

function scrollLoop() {
  xScrollPosition = window.scrollX;
  yScrollPosition = window.scrollY;
  setTranslate(0, yScrollPosition * 1.5, selectedImage);
  requestAnimation(scrollLoop);
}

window.addEventListener("DOMContentLoaded", scrollLoop, false);
2

skimming the code, my guess would be the lack of “px” for your xPos. Its there for yPos, but not xPos. Actually, I now see you’re passing in 0, which should make it ok, though given that its configurable, the px should still be there :wink: But now I’m seeing that it looks like you’re not including a closing “)” in that same line for the “translate3d(”. So maybe that’s it?

2 Likes
3

Thank you so much! It was indeed the “)”. Sorry for the delay in replying as I was away. Really appreciate you taking the time to help me out and resolve this issue for me