[csswg-drafts] [css-scroll-snap-1] Path to interop among implementations

majido has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scroll-snap-1] Path to interop among implementations ==
# Current Implementation State

Chrome is working on implementation of snap points and we are getting close to shipping it. So I spent sometime looking at the current state of various implementation. I have summarized my finding below 

Given this, I believe what we will ship initially will match the current subset implemented by Safari with some additional features.

I like to use this issue to start a discussion around a practical plan to get interop on this specification. 

## Safari , Chrome (Behind a flag)

Safari is shipping a subset of current specification i.e., [`scrollsnap`](https://www.w3.org/TR/css-scroll-snap-1/)) since at least Version 11.0.3 and have removed their previous prefixed implementation of old spec. 


Here is some more detail around which features are implemented:


|              | Safari     | Chrome     | Test Page
|--------------|------------|------------|-------------------
| Touch        | Yes        | Yes        | [webkit demo page](https://webkit.org/demos/scroll-snap/) [0]
| Wheel        | Yes        | Yes        |
| Scroll Bar   | No         | Partial[1] |
| Keyboard     | No         | No         |
| Scroll{By,To}| Partial[2] | Yes        |[wpt test](https://w3c-test.org/css/css-scroll-snap/scrollTo-scrollBy-snaps.html)
| Margin       |old name [3]| Yes        |
| Padding      | Yes        | Yes        |
| Visibility   | No         | Yes        | [demo page](http://syj10.github.io/scroll-snap-demo.html)
| Large Element| No         | No         |
| Snap-Stop    | No         | No         |

[0] WebKit demo lists only the old syntax but the example use old and new so it works in Safari 11.
[1] Chrome scrollbar snapping only works for dragging
[2] Seem to be working only on viewport scrolling element but no inner scroller
[3] Safari is using scroll-snap-margin


## Firefox & Edge

Firefox and Edge still ship the old spefication, i.e., [`snappoints`](https://www.w3.org/TR/2016/WD-css-snappoints-1-20160329/).



# Path to Interop

Firefox has an [issue](https://bugzilla.mozilla.org/show_bug.cgi?id=1231777) to implement the new CR specification but there has not been any implementation progress as far I can see since the issue was filed two years ago. I didn't find any public info on Edge plans on this.

It will be great to find out more about intention of Firefox and Edge.

## Tests

Chrome has been upstreaming tests as we have been implementing the feature. See:
https://wpt.fyi/css/css-scroll-snap/

They cover key aspects but I suspect we need more tests covering edge cases. Hopefully there will be more tests as other implementations update to the new specification

## Communication to Authors on Usage of Old Properties

I wasn't about to find a lot of communication on how the spec has evolved and how common patterns of usage can be implemented in a way to work in both versions of the spec. 

If we expect the old properties to continue being used for a while longer, I feel such communication may be valuable.


For example a horizontal carrousel can be implemented as follow:

``` css
.container {
    overflow: x;

    /* old spec */
    scroll-snap-type: mandatory;
    snap-destination: 50% 50%;

    /* new spec */
    scroll-snap-type: x mandatory;
}

.center-aligned-child {
   /* old spec, probably also use -ms, and -webkit */
   scroll-snap-coordinate: 50% 50%;
   
   /* new spec */
   scroll-snap-align: center;
}

.start-aligned-child {
   /* old spec, probably also use -ms, and -webkit */
   scroll-snap-coordinate: 0% 0%;
   
   /* new spec */
   scroll-snap-align: start none;
}
.end-aligned-child {
   /* old spec, probably also use -ms, and -webkit */
   scroll-snap-coordinate: 100% 100%;
   
   /* new spec */
   scroll-snap-align: end none;
}
```

In particular, I think we likely want to strongly discourage usage of `scroll-snap-points-{x, y}` from old spec since there is no good way to have closely matching behavior without lots of hacks and additional elements.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2523 using your GitHub account

Received on Tuesday, 10 April 2018 10:30:47 UTC