1387347 - Weird backwards scrolling on specific website

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P5)

Description

[avada]

Attachment: screencast of backwards scrolling

I experience this weird backwards scrolling on this website.
I think scrolling is supposed to happen unevenly for the columns. At least that's what happens on a chromium based browser and when I set layers.async-pan-zoom.enabled to false. (Reproduced it on a new profile)

So it seems it's APZ related. I tried it on beta and nightly.

I attached a video of the issue.

Comment 1

[Botond Ballo [:botond]]

The page is using a "scroll" event handler to scroll the columns at different rates (presumably in an attempt to keep the times lined up horizontally).

The thing is, the page allows the browser to scroll the content by the default amount, and then "fixes up" the scroll offset in the scroll event handler.

With async scrolling, where the browser's scrolling can be rendered to screen before the effects of a "scroll" event handler, this results in the observed effect of first scrolling forward in the given direction (the browser's scrolling), and then backwards by some amount (the scroll event handler's "fixup").

The page author could achieve a better scrolling experience if they didn't allow the browser to scroll the content at all, and instead did all of the scrolling in the event handler. One way to do this would be the way Google Sheets does it, by having a "dummy" scrollable element that doesn't actually contain any content (to get the browser to create a scrollbar and fire "scroll" events), and the move the actual content from the scroll event handler. The resulting scrolling wouldn't be async, but at least it wouldn't have the backwards/forwards artifact we are currently seeing.

In the longer term, page authors will be able to use scroll-linked animations [1] to implement effects like this in a way that's compatible with async scrolling.

[1] https://wicg.github.io/scroll-animations/

Comment 2

[Botond Ballo [:botond]]

(In reply to Botond Ballo [:botond] from comment #1)
> The page author could achieve a better scrolling experience if they didn't
> allow the browser to scroll the content at all, and instead did all of the
> scrolling in the event handler. One way to do this would be the way Google
> Sheets does it, by having a "dummy" scrollable element that doesn't actually
> contain any content (to get the browser to create a scrollbar and fire
> "scroll" events), and the move the actual content from the scroll event
> handler. The resulting scrolling wouldn't be async, but at least it wouldn't
> have the backwards/forwards artifact we are currently seeing.

Moving the bug to Tech Evangelism on this basis.

Comment 3

[Botond Ballo [:botond]]

Note that this is not specific to autoscrolling - all APZ scrolling methods (e.g. mouse wheel) are affected.

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 5

[Raul Bucata]

Unfortunately, the link provided is not valid anymore:

https://prnt.sc/xSUSHrZJPw68

Reporter, please submit a valid updated link in order to try and replicate the issue.

Notes:
Various VPN locations were used.

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2022-03-28) (64-bit) /Chrome Version 99.0.4844.84 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64

Comment 6

[avada]

(In reply to raul softvision from comment #5)

Unfortunately, the link provided is not valid anymore:

https://prnt.sc/xSUSHrZJPw68

Reporter, please submit a valid updated link in order to try and replicate the issue.

Notes:
Various VPN locations were used.

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2022-03-28) (64-bit) /Chrome Version 99.0.4844.84 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64

Well, that sort of thing happens when you wait long enough for the website to disappear.

Anyway, as far as I can tell the website transitioned here: https://www.awilime.com/tv/musor/

Scrolling is still buggy, apparently the website is only scrolled on every 15th mouse wheel step. In chromium it scrolls normally.

(Autoscroll is not available and there's no scrollbar)

Comment 7

[Raul Bucata]

Thank you for the update. Unfortunately, I was not able to reproduce the issue. After checking the updated link, I do not see any difference in the behavior of the page when scrolling compared to Chrome. Scrolling is not lagging nor does it present any backward movement. Scrolling is smooth on the page:

https://media.giphy.com/media/OgW8WwNTVDcdfUqcOR/giphy.gif

Reported, did you happen to test the issue on the latest build of Firefox Nightly? If not, could you please test the issue using the latest build of Firefox Nightly, in a clean profile, without any add-ons or extensions installed? What I would do usually to test this kind of issue, is:

1. Type about:profiles in the url bar.
2. Choose Create a new profile.
3. Call it deleteme or anything you please.
4. Then start it. (this one you will be sure that nothing is interfering, no ghost caching etc.)
5. Test.

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2022-03-29) (64-bit)
Operating System: Windows 10 PRO x64

Comment 8

[avada]

Well it's not smooth for me. The page only scrolls once after 10-20 mousewheel clicks. Never less then 10

Comment 9

[Botond Ballo [:botond]]

(In reply to avada from comment #8)

The page only scrolls once after 10-20 mousewheel clicks. Never less then 10

Sounds pretty bad, and definitely not what I'm seeing (it scrolls on every click for me).

Perhaps you could take a performance profile using https://profiler.firefox.com/ during one of those periods where it doesn't scroll for 10 clicks? That might yield some clues as to what's happening.