Parallax effect - poor performance on Firefox

Question

I'm building multi layered parallax effect on my site (html, css, js). Everything works quite well, but I've noticed that my parallax effect works really bad on Firefox, window.onscroll seems to be laggy, refresh rate so to speak is very low.

Here's my JS implementation:

document.addEventListener('DOMContentLoaded', function() {
    const layers = document.querySelectorAll("[data-type='parallax']");

    window.addEventListener('scroll', event => {
        const topDistance = window.pageYOffset;
      window.requestAnimationFrame(function() {
        for (let i = 0; i < layers.length; ++i) {
          const depth = layers[i].getAttribute('data-depth');
          const movement = topDistance * depth;
          const translate3d = 'translate3d(0, ' + movement + 'px, 0)';
          layers[i].style.transform = translate3d;
        }
      })
    });
});

My html code:

<div class="parallax-banner">
    <div class="parallax-layer layer-1" data-type="parallax" data-depth="0.05"></div>
    <div class="parallax-layer layer-2" data-type="parallax" data-depth="0.2"></div>
    <div class="parallax-layer layer-3" data-type="parallax" data-depth="0.4"></div>
    <div class="parallax-layer layer-4" data-type="parallax" data-depth="0.6"></div>
    <div class="parallax-layer layer-5" data-type="parallax" data-depth="0.7"></div>
    <div class="parallax-layer layer-6" data-type="parallax" data-depth="0"></div>
</div>

Have you encountered it? Is it typical issue? How can I fix that?

Answer 1

I have the following very simple JS-implementation with two layers in the back, which was unusable with Firefox due to jittering and laggy behaviour:

$(function() {
  $(window).on('scroll', function() {
    $('#background').css('background-position-y', $(window).scrollTop() * -.15);
  });
});  
$(function() {
  $(window).on('scroll', function() {
    $('#background2').css('background-position-y', $(window).scrollTop() * -.09);
  });
  });

CSS-only alternatives didnt work for me as it caused the background layers to visibly overflow after my contents end.

Finally I found a way to improve the performance desktop Firefox (not on mobile yet). I added

position: fixed;
background-attachment: fixed;
background-position: top;

to all my background layers.

Still no improvement in iOS Safari and mobile Firefox. There are several bug reports for Firefox since version 16.

On my long way searching the internet for solutions i also found and added a script by keithclark but I'm not sure if this makes any difference at all, the script is from 2011:

/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {
console.log("Document executed")
  var root = doc.documentElement,
      scrollbarWidth, scrollEvent;

  // Not ideal, but better than UA sniffing.
  if ("MozAppearance" in root.style) {

    // determine the vertical scrollbar width
    scrollbarWidth = root.clientWidth;
    root.style.overflow = "scroll";
    scrollbarWidth -= root.clientWidth;
    root.style.overflow = "";

    // create a synthetic scroll event
    scrollEvent = doc.createEvent("UIEvent")
    scrollEvent.initEvent("scroll", true, true);

    // event dispatcher
    function scrollHandler() {
      doc.dispatchEvent(scrollEvent)
    }

    // detect mouse events in the document scrollbar track
    doc.addEventListener("mousedown", function(e) {
      if (e.clientX > root.clientWidth - scrollbarWidth) {
        doc.addEventListener("mousemove", scrollHandler, false);
        doc.addEventListener("mouseup", function() {
          doc.removeEventListener("mouseup", arguments.callee, false);
          doc.removeEventListener("mousemove", scrollHandler, false);
        }, false)
      }
    }, false)

    // override mouse wheel behaviour.
    doc.addEventListener("DOMMouseScroll", function(e) {
      // Don't disable hot key behaviours
      if (!e.ctrlKey && !e.shiftKey) {
        root.scrollTop += e.detail * 16;
        scrollHandler.call(this, e);
        e.preventDefault()
      }
    }, false)

  }
})(document);

You can test it by pasting it to the console.

I hope I could at least help a little bit.