firefox scroll to animation is very laggy compared to chrome and safari

Question

I have made a web page in React Js and one section as a lot of images which causes the scroll to run 1 fps making it a very bad user experience.

The scroll works well both on safari and chrome so I can't understand why Firefox is so slow? It seems that Firefox generally is bad at rendering a lot of images at once. I used this code from this solution Cross browser JavaScript (not jQuery...) scroll to top animation

css

margin: 20px 10px 0 10px;
width: 30%;
min-width: 300px;
background: #FFFFFF;
border-radius: 4px;
-webkit-box-shadow: 0px 5px 15px 0px rgba(70, 71, 76, 0.07);
box-shadow: 0px 5px 15px 0px rgba(70, 71, 76, 0.07);
overflow: hidden;

Below you can see the HTML is rendered.

The scroll function being used is used on many other pages and it works fine. If I remove the employee's node the scroll function works very well. Anybody with a hint why Firefox is so laggy while safari and chrome work very well?

scroll function

scrollTo(position) {
    let scrollY = window.scrollY || document.documentElement.scrollTop,
        scrollTargetY = position() || 0,
        speed = 2000,
        easing = 'easeInOutSine',
        currentTime = 0

    // min time .1, max time .8 seconds
    let time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8))

    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
    let easingEquations = {
        easeOutSine: function (pos) {
        return Math.sin(pos * (Math.PI / 2));
        },
        easeInOutSine: function (pos) {
        return (-0.5 * (Math.cos(Math.PI * pos) - 1));
        },
    }

    // add animation loop
    function tick() {
      currentTime += 1 / 60;

      let p = currentTime / time;
      let t = easingEquations[easing](p);

      if (p < 1) {
        requestAnimationFrame(tick);
        window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
      } else {
        window.scrollTo(0, scrollTargetY);
      }
    }

    // call it once to get started
    tick()
    }

Levulose

Where is the scroll function you are talking about? Do you mean you have a scroll handler? You should post your code, or are you saying this is a problem with HTML only? Hard to tell what you are asking, consider improving your question. See stackoverflow.com/help/minimal-reproducible-example – Percaline

Updated my issue with the scroll function – Levulose

Have you tried profiling it? – Percaline

Yes i have what got was what site going to only 20 fps when the animation is running on firefox but the fps never goes under 40 on chrome – Levulose

I mean profiling the JS code developer.mozilla.org/en-US/docs/Mozilla/Performance/… and figuring out where the bottleneck is? – Percaline

I did profiling in Firefox I could not find any sings bottleneck as stated above I only find that fps is dropped drastically only in firefox – Levulose

Answer 1

It's just because of firefox. I have almost the same issue. On my page when I style some div with 'padding: 32px 0', the scrolling is lagging. When I change to 'padding: 33px 0' the scrolling becomes smooth again.

I hope Firefox rip soon

Bakst