使用requestAnimationFrame并取消滚动事件后，视差就是断断续续的跨浏览器

Question

我试图弄清楚为什么，在取消滚动并使用requestAnimationFrame之后，我看不到跨浏览器的兼容性。

我觉得我已经为寻找这个特定问题做了很多工作，并且有很多关于该主题的文章，但是没有一个对我有帮助。另外要注意的是，我遇到的所有示例都使用PNG进行视差处理。我的特定项目是使用SVG来实现可伸缩性，我已采取所有步骤来确保SVG的文件大小尽可能小（最大为57kb），但这并没有解决任何问题。我遇到的问题是跨浏览器兼容性。在Chrome中，一切正常，但是在FireFox和Safari中，一旦滚动更新，部分视差就会“反弹”或变慢。我有点不确定这是否是我的问题，因为我知道Chrome浏览器没有平滑的滚动，并且我不熟悉如何解决不同浏览器中的滚动跟踪问题。

所有这些，我想知道我在做错什么。

let ticking = false;
let lastKnownScrollY = 0;

const requestAnimate = () => {
  if(!ticking) {
    requestAnimationFrame(update)
  }
  ticking = true;
}
const updateScroll = () => {
  lastKnownScrollY = $(window).scrollTop();
  requestAnimate();
}
const update = () => {
  let currentScrollY = lastKnownScrollY;
  ticking = false;
  //This function passes the current scroll position as an argument to my 
  //function that updates the translate3D Y values
  animatedElements(currentScrollY)
}
$(window).on('scroll', updateScroll)

因此，在这里，我引用了本文https://www.html5rocks.com/en/tutorials/speed/animations/来消除滚动事件，并且仅在需要更新requestAnimationFrame以确保它不会堆叠时才对其进行更新。预期的结果是更好的性能，并修复了在FireFox和Safari中某些层上发生的“反弹”效果。实际结果是那些没有发生的事情。