Open Bug 1643217 Opened 5 years ago Updated 1 years ago

CSS Scroll Snap conflicts with JS scroll behavior smooth

Categories

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

77 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: austintannerhodges, Unassigned)

Details

Attachments

(1 file)

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:

  1. Create a centered slider using CSS Scroll Snap.
  2. 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.

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

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

So maybe we're snapping on an intermediate scroll position and we should only apply snapping to the final position?

(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?

Flags: needinfo?(tnikkel)
Severity: -- → S3
Flags: needinfo?(tnikkel)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: