1832888 - Virgin Pulse's "My Actions" carousel has janky scrolling animation in Firefox

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect, P3)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Log in to a Virgin Pulse account at https://app.member.virginpulse.com/
   (These accounts aren't publicly/freely available, but all benefit-eligible employees of MoCo should have access to an account, I think.)
2. Visit the "home" screen, i.e. https://app.member.virginpulse.com/#/home
3. Under the "My Actions" section, click the right-arrow button to scroll through the cards there.

ACTUAL RESULTS:
The carousel scroll animation is quite janky.

EXPECTED RESULTS:
Smoother scrolling animation.

Chrome animates this carousel quite smoothly. See attached screencast, showing the scrolling in Firefox, and then Chrome, and then Firefox again at the end.

I'm using Firefox NIghtly 115.0a1 (2023-05-12) (64-bit) on Ubuntu 22.04, on a ThinkStation P620.

(Note, the symptoms here are similar to bug 1825391, but in this case I think the scroll operation is done using an actual scrollable area with the page dynamically adjusting scrollLeft -- maybe repeatedly in small increments via rAF or similar? Specifically, there's a <div class="carousel-slider"> which has overflow-x:hidden, whose scroll position gets dynamically changed. You can see this more clearly if you adjust this element to have overflow-x:scroll using devtools.)

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast comparing Firefox Nightly (janky), then Chrome (smooth), then Firefox again (janky)

Comment 2

[Daniel Holbert [:dholbert]]

Interestingly, I can't immediately reproduce in a fresh Firefox user-profile -- only in my main browsing profile. Perhaps it helps to have a zillion tabs open that are contending for resources? not sure.

However, one thing I did notice even in my fresh user-profile: notably, this site is doing a ton of work in the background, continuously (in a fresh profile as well as my regular profile). Probably that work is contending with the scrolling-related tasks and running into trouble.

Here's a performance profile captured in that fresh user-profile: https://share.firefox.dev/41tmRXr
I just loaded the home page and then looked at it, without doing anything, for ~20seconds. Nothing is visibly changing or animating on the page during this time, but the site is just continuously running some JS in the background, it seems.

Comment 3

[Daniel Holbert [:dholbert]]

In Chrome, as well, the site seems to peg a CPU core -- it's got continuous 110%-130% CPU usage reported by "top" in chrome when just looking at the page).

So this may just be a pathological site... Given this, I'm not surprised that its dynamic JS-driven scrolling is a bit janky under some conditions. And I'm happy to notice that we look similar to Chrome in a fresh profile. Given that, let's call this S4, but maybe we can also see about getting the site fixed to not peg a CPU core...

Comment 4

[Timothy Nikkel (:tnikkel)]

I looked at this quickly on my machine, I didn't compare to Chrome but I didn't notice Firefox being bad, it seemed okay.

Comment 5

[Daniel Holbert [:dholbert]]

Did you check your CPU usage? Per comment 2, the responsiveness seemed fine to me in a fresh user profile, but I'm seeing 100% CPU usage from Firefox and Chrome, regardless of how the scrolling feels, even in a fresh profile. (This is on Ubuntu 22.04, but I also tested Chrome v113 on macOS Ventura and saw 100% CPU usage there too.)

(I used the Live Chat support-button on the site to report the 100%-CPU-usage issue to Virgin Pulse, and the agent in my chat session said they'd forward the info along to the appropriate department. If they're able to fix that, that'll hopefully avoid the scroll jankiness issue discussed here.)