1753188 - scroll-snap-type blocks scrolling using a mouse wheel

Status: NEW

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

Description

[Jari Thorup Palo]

Steps to reproduce:

Created a webpage using CSS scroll snap where parts of the page is using scroll-snap-align property, and some parts isn't using it.

Reproduction: https://codepen.io/japalo/pen/JjOXaBp

Actual results:

Firefox on Windows 10 blocks scrolling with mouse wheel below the snapped elements, and Firefox on MacOS and Windows doesn't snap scroll on mouse wheel scrolling. On windows i managed to trigger snap by scrolling and then clicking somewhere on the document. This triggers a scroll snap.

Expected results:

Scroll snap should occur on the elements that has scroll-snap-align, and the elements without it should be "vanilla" scroll.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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 revert this change in case you think the bot is wrong.

Comment 2

[Daniel Holbert [:dholbert]]

Thanks for the bug report! I can reproduce, using my mouse's scrollwheel, in Firefox Nightly on Linux as well as MacOS. So this doesn't seem to be Windows-specific.

(Two-finger touchpad-scrolling does seem to work, i.e. it does reach the "won't let us scroll to this" text; it only seems to be mousewheel scrolling that's broken. I don't know enough about scroll-snap to know if that's surprising or not, but I figured I'd mention it.)

hiro, do you know if this is a known issue?

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (from reporter's codepen, w/ minor clarifying edit to text)

Comment 4

[Daniel Holbert [:dholbert]]

As a spot-check, I tested Nightly 2021-01-01 (version 86) on Linux, and I can reproduce in that version as well. So, this seems to not b a regression (or at least, it didn't regress in the last ~year).

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Though I can't recall there's already a bug report or not, my best guess is that this is caused by this check, which, I believe, has been there since our previous old scroll snap implementation. Just dropping the check should work I guess.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #5)

Though I can't recall there's already a bug report or not, my best guess is that this is caused by this check, which, I believe, has been there since our previous old scroll snap implementation. Just dropping the check should work I guess.

I was wrong. Dropping the check didn't help at all. :/

Comment 7

[Hiroyuki Ikezoe (:hiro)]

This is due to our default scroll snap proximity threshold, it's 200px in CSS units. If the pref value is 100px, the test case in comment 3 works. Or if I change mousewheel.min_line_scroll_amount to 50, it works too.

Comment 8

[[:bali balo]]

Are there any plans to change the defaults for these values?

Here is another very simple example showing this issue. This demo completely prevents me from scrolling upwards using my mouse wheel in Firefox.

Indeed, changing either of the config values mentioned in comment #7 does seem to let me escape this scroll trap. Surely this means that either the defaults or the overall behavior need to be adjusted?

Comment 9

[[:bali balo]]

(In reply to [:bali balo] from comment #8)

Are there any plans to change the defaults for these values?

Just spotted the "Depends on" bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1766386 - apologies, didn't see that before. Looks like it is being considered at least

Comment 10

[Botond Ballo [:botond]]

Jari and Bali, could one of you please confirm whether the issue has been resolved for you in recent Firefox versions (presumably by bug bug 1766386 in v118 or later)?

Comment 11

[Daniel Holbert [:dholbert]]

I can still reproduce the bug, using latest Nightly 132.0a1 (2024-09-18) on Ubuntu.

Firefox Nightly won't let me scroll to the end of the attached testcase, using my mouse's scrollwheel. I can get down to the blue area, but no further than that.

Comment 12

[Botond Ballo [:botond]]

Indeed, so can I; apologies for the noise.

Comment 13

[[:bali balo]]

Hey so in my case, my original test jsfiddle actually seems to be working now (I can scroll up in the list, which I could not do before). However the CodePen from Jari is still broken indeed.

Another weirdness is in this slightly altered of my previous fiddle, where the snap point is a bit higher than the bottom of the list. Scrolling up and down between the snap point (45) and the bottom (50) seems to sometimes randomly get me stuck in a position slightly above the bottom (around item 48-49) and I cannot scroll to the bottom at all until I scroll up again. Here is a video of the bug.

(testing in Firefox Nightly 132.0a1)

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Hiro do you know how other browsers deal with this? Is this just the snap proximity threshold? Should that be in a spec?

Comment 15

[Hiroyuki Ikezoe (:hiro)]

I guess it's not spec issue at all, it's a bug in our implementation.

What I am guessing is that if there's no snap candidate we could find within the proximity, we need to use the given normal destination here. We use the original scroll position for wheel event, the scrolling stuck symptom implies this our incorrect behavior. We need to check scroll-snap-type proximity there.

Note that this bug has been tracked in "Scroll Snap Level I Fixes" JIRA ticker.