Intent to implement and ship the CSS Scroll Snap Module Level 1 and unship old scroll snap properties

[Hiroyuki Ikezoe]

Summary:
The scroll snap specification has been significantly changed since we
implemented. scroll-snap-coordinate, scroll-snap-destination and
scroll-snap-points-{x,y} were dropped, instead, scroll-snap-align,
scroll-snap-margin and scroll-snap-padding were added in the spec. Also,
scroll-snap-type was changed to a longhand property and its syntax was
changed in the spec.
Due to the scroll-snap-type change, this migration will happen
irreversibly
in terms of the scroll-snap-type property. Once the change happens in bug
1312163 [1], you can no longer use the old longhands,
scroll-snap-type-{x,y},
and no longer use the old shorthand syntax like `scroll-snap-type:
mandatory`.
That means that, for example, sites specifying only scroll-snap-type-x will
be broken. To mitigate it, I am going to land a bunch of relevant stuff
at the
same time so that we can switch to the new scroll snap at once.

Bug:
A meta bug is
https://bugzilla.mozilla.org/show_bug.cgi?id=1231777

Link to standard:
https://drafts.csswg.org/css-scroll-snap-1/

Platform coverage: all

Estimated or target release: Firefox 68

Preference behind which this will be implemented:
layout.css.scroll-snap-v1.enabled

Is this feature enabled by default in sandboxed iframes?
Yes

DevTools bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1133666

Do other browser engines implement this?
Chrome and Safari already shipped

web-platform-tests:
http://w3c-test.org/css/css-scroll-snap/

Additional notes:
scroll-snap-stop which was introduced in the new spec is not going to be
implemented now since it's marked at-risk in the spec

Thanks,
hiro

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1312163

[fantasai]

All of this sounds great to me, and I'm pretty excited that Mozilla will
be updating to the latest spec. Most of the changes were in response to
roc's feedback on the spec, and make it a much more robust system for the
variable environment of the Web.

There's a couple things I want to make sure you watch out for and get
right before shipping:

1. Handling overlarge snap areas per https://www.w3.org/TR/css-scroll-snap-1/#snap-overflow
This is important to make content accessible on smaller-than-expected screens.

2. Handling scroll-padding correctly even when snapping is turned off,
since it should affect all paging operations and scroll-into-view
operations. https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding

3. Likewise, supporting scroll-margin's effects even when snapping is off:
it still be adjusting the element's scroll-into-view area
https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin

Also, feel free to complain at me if anything in the spec is unclear. :)
https://github.com/w3c/csswg-drafts/issues
IRC: fantasai
Bugzilla: fantas...@inkedblade.net

~fantasai

[Hiroyuki Ikezoe]

Hello, fantasai!

On Sun, Mar 10, 2019 at 6:14 AM fantasai <fantasa...@inkedblade.net>
wrote:

> 1. Handling overlarge snap areas per
> https://www.w3.org/TR/css-scroll-snap-1/#snap-overflow
> This is important to make content accessible on smaller-than-expected
> screens.
>

I think I've finished this properly, but..

2. Handling scroll-padding correctly even when snapping is turned off,
> since it should affect all paging operations and scroll-into-view
> operations. https://www.w3.org/TR/css-scroll-snap-1/#scroll-padding
>
> 3. Likewise, supporting scroll-margin's effects even when snapping is off:
> it still be adjusting the element's scroll-into-view area
> https://www.w3.org/TR/css-scroll-snap-1/#scroll-margin
>

I was totally misunderstanding these two. Filed bug 1534070 for that.

Thanks!
hiro