# requestAnimationFrame problems on safari

**URL:** https://forum.kirupa.com/t/requestanimationframe-problems-on-safari/636161
**Category:** programming
**Created:** [March 9, 2017, 11:18pm UTC](https://forum.kirupa.com/t/requestanimationframe-problems-on-safari/636161 "2017-03-09T23:18:20Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Egorian](https://avatars.discourse-cdn.com/v4/letter/e/8797f3/32.png) [@Egorian](https://forum.kirupa.com/u/Egorian)
#### Post date: [March 9, 2017, 11:18pm UTC](https://forum.kirupa.com/t/requestanimationframe-problems-on-safari/636161/1 "2017-03-09T23:18:20Z")

</div>

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);
```

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [March 10, 2017, 10:06am UTC](https://forum.kirupa.com/t/requestanimationframe-problems-on-safari/636161/2 "2017-03-10T10:06:24Z")

</div>

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 😉 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?

---

<div class="post-metadata">

### Author: ![Egorian](https://avatars.discourse-cdn.com/v4/letter/e/8797f3/32.png) [@Egorian](https://forum.kirupa.com/u/Egorian)
#### Post date: [March 13, 2017, 2:38pm UTC](https://forum.kirupa.com/t/requestanimationframe-problems-on-safari/636161/3 "2017-03-13T14:38:53Z")

</div>

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