1744289 - Trackpad scrolling gets stuck on containers with 'scroll-snap-type: x mandatory'

Status: RESOLVED DUPLICATE of bug 1737820

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

Description

[jonohewitt]

Attachment: scroll-snap.mp4

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:95.0) Gecko/20100101 Firefox/95.0

Steps to reproduce:

Attempt to scroll across a container with 'scroll-snap-type: x mandatory' applied to it.

Examples:

https://codepen.io/jonohewitt/pen/KKXddVo
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

Actual results:

On short horizontal swipes, the container scroll position hangs and does not snap to one of its contents edges.

Tested with Firefox Beta 95.0b12 (64-bit) and 95.0b12 (64-bit) Developer Edition on macOS Monterey 12.0.1. Tested with external Magic Trackpad 2 and with Macbook Pro built in trackpad.

I've attached a screen recording in various browsers.

Expected results:

The scroll position should smoothly snap to the edges of one of the nearest contained item, ideally with momentum from the trackpad swipe.

This works as expected in on macOS with Chrome Version 96 and Safari Version 15.1, and on Android with Firefox 94.1.2

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

[oliver]

This issue is not mac specific, tried it on a windows laptop and got the same results.

On macs there is a way to fix this by:
step 1: Go into your settings
step 2: Click on accessibility
step 3: Scroll down to pointer control
and step 4: in trackpad options set scrolling to without inertia

but this is pretty difficult to use on other websites in my opinion.

Comment 3

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

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

For more information, please visit auto_nag documentation.

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

I wasn't able to reproduce the scroll hang on Nightly (2021-12-23) or Firefox 95.0.2 with the Macbook Pro built in trackpad. I've tried both slow & fast horizontal swipe, and the content always snaps to contents edges for me.

jonohewitt, I'm curious if you could reproduce this on a clean profile [1]?

[1] https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles?redirectslug=profile-manager-create-and-remove-firefox-profiles&redirectlocale=en-US

Comment 5

[anzbert]

same issue here on my macbook air m1 with latest OS. scrolling hangs on trackpad scroll. it works on all browsers except firefox. i could easily reproduce the behaviour on tesla.com, which uses mandatory snap on the y axis. firefox version is 95.0.2.

Comment 6

[kylepfeeley]

I'm getting the same issue. Please let me know if anyone has discovered a workaround for this.

Comment 7

[Adam Khan]

I have the problem for scroll-snap proximity as well as mandatory. (I'm surprised this problem is not more widely reported.)

Comment 8

[Devon]

Reproducing here, too.

• macOS 12.2
• Firefox 96.0.3 (64-bit)
• scroll with trackpad

I'm observing "sticky" scrolling with both scroll-snap-type: x mandatory and scroll-snap-type: x proximity. As indicated above it appears that scroll snap is interfering with momentum / inertia scrolling.

Chrome and Safari work as expected, allowing momentum scrolling while also implementing scroll snapping.

In the meantime, I'm disabling sticky scrolling behaviors in FF using:

.snap-no-ff {
  scroll-snap-type: x mandatory;
}

@supports (-moz-appearance: none) {
  /*
    Disable in FF due to https://bugzilla.mozilla.org/show_bug.cgi?id=1744289
    using @supports https://stackoverflow.com/a/32455002
  */
  .snap-no-ff {
    scroll-snap-type: none;
  }
}

Comment 9

[smlmrkhlms]

I am experience the same issue as well.

• MacOS Monterey v12.0.1
• Firefox 96.0.3 (64-bit)
• Scrolling w/Apple Magic Mouse

I have a container that has scroll-snap-type: x mandatory and the children have scrollSnapAlign: start. This combination does not work in the same way everyone else here has described.

Comment 10

[smlmrkhlms]

Just correcting a typo. I meant scroll-snap-align: start

(In reply to smlmrkhlms from comment #9)

I am experience the same issue as well.

• MacOS Monterey v12.0.1
• Firefox 96.0.3 (64-bit)
• Scrolling w/Apple Magic Mouse

I have a container that has scroll-snap-type: x mandatory and the children have scrollSnapAlign: start. This combination does not work in the same way everyone else here has described.

Comment 11

[jonohewitt]

(In reply to Ting-Yu Lin [:TYLin] (UTC-8) from comment #4)

I wasn't able to reproduce the scroll hang on Nightly (2021-12-23) or Firefox 95.0.2 with the Macbook Pro built in trackpad. I've tried both slow & fast horizontal swipe, and the content always snaps to contents edges for me.

jonohewitt, I'm curious if you could reproduce this on a clean profile [1]?

[1] https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles?redirectslug=profile-manager-create-and-remove-firefox-profiles&redirectlocale=en-US

Sorry for the delayed response - yes I can confirm that I'm still able to reproduce this issue with a new profile, now on Firefox 97.0.

Comment 12

[Christian Aarfing]

I can confirm that it's a regression as well. I'm in Firefox 98b3 on macOS 12.2.1 on a M1 MacBook Pro.

Comment 13

[Bramus]

Duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1737820

Comment 14

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

From the description in bug 1737820, it looks like this bug is only on macOS Monterey, matching all the reporters' OS version in the previous comments. Let's make this a duplication of bug 1737820 since it is an older bug and mentioned in scroll-snap-type's "Browser compatibility" note.