Bug 227246

Summary:	REGRESSION (r271439): JS-Smooth scrolling with snap points broken on Apple Music pages
Product:	WebKit	Reporter:	Simon Fraser (smfr) <simon.fraser>
Component:	Scrolling	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED WONTFIX
Severity:	Normal	CC:	mrobinson, simon.fraser, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari Technology Preview
Hardware:	Unspecified
OS:	Unspecified
See Also:	https://bugs.webkit.org/show_bug.cgi?id=145330

Description Simon Fraser (smfr) 2021-06-21 20:21:56 PDT

JS-driven smooth scrolling is broken when used in combination with scroll snapping, which breaks Apple Music pages.

Testcase: https://codepen.io/danrichman/pen/ZEeNKvb

Comment 1 Simon Fraser (smfr) 2021-06-21 20:23:23 PDT

It seems that after r271439 snapping happens after each call to scrollBy(), thereby breaking pages that want to smoothly scroll (via JS) to the next snap point.

Comment 2 Simon Fraser (smfr) 2021-06-21 20:24:31 PDT

<rdar://79591028>

Comment 3 Simon Fraser (smfr) 2021-06-21 20:25:16 PDT

Maybe we should revert r271439 until we have smooth scrolling enabled by default?

Comment 4 Simon Fraser (smfr) 2021-06-21 21:59:41 PDT

The testcase works in Chrome and Firefox, so do they not snap for programmatic scrolls?

Comment 5 Martin Robinson 2021-06-22 00:16:10 PDT

(In reply to Simon Fraser (smfr) from comment #4)
> The testcase works in Chrome and Firefox, so do they not snap for
> programmatic scrolls?

Chrome and Firefox definitely do snapping for programmatic scroll events.

I'm not sure about the Apple Music page, but in the test case the `scroll-snap-type: y mandatory;` rule is applied to the body tag. Normally the body tag doesn't accept `scroll-snap-type` rules, but WebKit maintains it for backwards compatibility with an old version of the specification. This means that scroll snapping is not enabled for Chrome and Firefox, but is for WebKit browsers. If you move the rule to the html tag, then the animation is broken in different ways in Chrome and Firefox.

Removing this backward compatibility feature is tracked by: https://bugs.webkit.org/show_bug.cgi?id=200643.

Comment 6 Simon Fraser (smfr) 2021-06-22 10:02:55 PDT

The previous demo used scroll-snap-type on body, which has different behavior in WebKit.

Here's a testcase with scroll-snap-type on the root:
https://codepen.io/smfr/pen/JjWqVoz

This shows the same behavior in Chrome and Safari now (Firefox seems a bit broken).

Comment 7 Simon Fraser (smfr) 2021-06-22 14:09:17 PDT

This is correct behavior.