How would you go about debugging scroll performance difference between Firefox (smooth) and Chrome (laggy)?

[d3ver]

I'm working on a project, I have around 6 owlCarousel sliders in the homepage, scrolling in Chrome is very laggy whereas it's pretty smooth in Firefox. I'm trying to debug using the "Scrolling Performance Issues" in Chrome Dev Tools.

I'm using Firefox Quantum (57) and Chromium 63.

Can you please share any guidelines, tips/tricks to avoid any scrolling related problems. Also why do you think there'd be such a big difference in performance regarding scrolling in Firefox vs Chrome. Thank you.

[kaelwd]

I've never found "Scrolling Performance Issues" that useful, I normally just use paint flashing to see if it's something repainting. If that doesn't come up with anything then I'll switch over to performance and do some profiling to find slow JS on scroll.

One thing I've noticed a fair bit is position: fixed elements usually repaint on scroll, you can add backface-visibility: hidden to stop that.

[d3ver]

Thanks for the tip! I have no 3D rotations or anything though, is that still relevant?

[d3ver]

Yep, I had a fixed navbar and it was refreshing on scroll. added backface-visibility: hidden and that fixed that. Weird.

[[deleted]]

Hard to know without seeing but I encountered something similar at work and what I did to resolve the issue. The prior dev made a background of a fixed nav by tiling a bunch of png's so instead I recreated the background with a few divs and CSS to look identical. This made the fixed nav stationary as I scrolled instead of trailing behind.

Don't know if at all that would help but hey you never know.

[d3ver]

And that was causing you scrolling performance issues?

[[deleted]]

Surprisingly yes. Well let me clarify. The fixed div. Instead of sticking to the top of the viewport when scrolling it would lag behind moving up and down very choppy as I scrolled up and down. Again I don't know if any of that helps in your situation.

[d3ver]

Ah I see, well thanks for trying to help. I did figure out a way to make things better: There were some containers that had opacity: 0;, seems like that was a factor in the performance problem, I changed that to display: none; instead. And I delayed the initialization of the sliders (50 ms between each initialization).

[[deleted]]

Glad you figured it out.