Open Bug 1959811 Opened 18 days ago Updated 16 hours ago

`scroll-behavior: smooth` interacts poorly with `scroll-snap-type: x mandatory` and `scroll-snap-stop: always`, causing scroll to get stuck on some items

Categories

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

Product:
Core
Component:
Layout: Scrolling and Overflow
Version:
Firefox 137
Platform:
Unspecified
Windows
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: aleksandrhovhannisyan, Unassigned, NeedInfo)

References

(Depends on 1 open bug)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Steps to reproduce:

I've put together this Codepen demo of a simple carousel to make it easier to diagnose this bug: https://codepen.io/AleksandrHovhannisyan/pen/MYWMjyY

  1. Click the right-arrow button to scroll the carousel to the right. Observe that the scrolling stops at each item along the way (expected) due to mandatory scroll snapping + scroll-snap-stop: always.
  2. Once you reach item 6, click the right-arrow again to attempt to move to item 7.
  3. Observe that you cannot move past item 6 no matter how many times you click the button.

The core logic of this demo boils down to this:

  1. A scroll region with scroll-behavior: smooth and scroll-snap-type: x mandatory
  2. Scroll snap items with scroll-snap-stop: always
  3. JavaScript that pages the carousel left or right by its full clientWidth (the visible "scroll viewport").

Additionally, toggle different combinations of the checkboxes at the bottom of the Codepen, and observe that this bug is only reproducible when all three checkboxes are checked.

Actual results:

Scrolling gets stuck on items intermittently when smooth scrolling is enabled AND scroll-snap-type: x mandatory and scroll-snap-stop: always are also set.

Expected results:

Smooth scrolling should not interfere with scroll snap

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout: Scrolling and Overflow
Product: Firefox → Core

Update: I'm unable to reproduce this bug on macOS + Firefox 137. It seems to only be an issue when testing on Windows (10 or 11) + Firefox 137.

Moreover, I'm able to scroll past the problematic item if I use keyboard focus + Enter to click the navigation buttons, or if I simply scroll the carousel normally with a scroll wheel or trackpad gestures, or even arrow keys.

The severity field is not set for this bug.
:hiro, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(hikezoe.birchill)

Thanks for reporting. Indeed I can't see the issue on Linux, I can see the issue on Windows 11. In my case, scrolling gets stuck at item 2, looks like it depends on DPI.

Oddly I don't see the issue on Android either. There should not be any difference on platforms.

I don't understand what's going on there, but I found setting layout.scroll.disable-pixel-alignment=true fixes the issue.

Aleksandr, would you mind trying to change layout.scroll.disable-pixel-alignment to true in about:config? Thanks!

Depends on: 1946610
Flags: needinfo?(hikezoe.birchill) → needinfo?(aleksandrhovhannisyan)
OS: Unspecified → Windows
You need to log in before you can comment on or make changes to this bug.