CSS Scroll Snap conflicts with JS scroll behavior smooth
Categories
(Core :: Layout: Scrolling and Overflow, defect)
Tracking
()
People
(Reporter: austintannerhodges, Unassigned)
Details
Attachments
(1 file)
256.09 KB,
video/mp4
|
Details |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15
Steps to reproduce:
- Create a centered slider using CSS Scroll Snap.
- Add a JS event to scroll to slides when you focus them using scroll behavior "smooth".
DEMO: https://codepen.io/tannerhodges/pen/PoZogmb
Occurs on both Mac and Windows, but not on Firefox for Android.
See demo for a full description, list of tested browsers, and screencasts of each result.
Actual results:
Instead of smooth scrolling to the next slide, the slider "jumps" and snaps back to the current slide.
For example, if you start on slide 1 and click slide 2 it starts to scroll but snaps back to slide 1.
Expected results:
The slider should scroll and snap to the next slide.
Comment 1•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
Comment 2•5 years ago
|
||
So maybe we're snapping on an intermediate scroll position and we should only apply snapping to the final position?
Reporter | ||
Comment 3•5 years ago
|
||
(In reply to Timothy Nikkel (:tnikkel) from comment #2)
So maybe we're snapping on an intermediate scroll position and we should only apply snapping to the final position?
Yes, that sounds right.
I'm not as familiar with browser internals, but it seems like snapping normally waits until a user interaction completes (e.g., scrolling the trackpad or dragging the scrollbar) but it snaps immediately and overrides the programmatic JS scroll.
Unsure if it's related to any of these other scroll-behavior
bugs, like https://bugzilla.mozilla.org/show_bug.cgi?id=1589668?
Updated•5 years ago
|
Updated•5 years ago
|
Updated•1 years ago
|
Description
•