[css-scroll-snap] Difficult to use snap areas which are larger than the scrollport

[flackr]

The css-scroll-snap spec makes it possible for snap areas larger than the scrollport to be accessed, however, the behavior in many browsers makes it quite difficult and results in unexpected scrolls. For example, If you test the examples on https://output.jsbin.com/pojeyeg it is difficult to reach the end of a snap area without snapping to the next. Also, it is difficult to get to the previous element in the scroll port unless you scroll very far such that the top / left of the element is closer than the current one. In a more extreme example it is very difficult to scroll to the previous item unless you fling.

I think we should update the spec to consider the entire area of valid snap positions (per css-scroll-snap section 5.2.2) when determining which snap point to snap to, and only snap as far as necessary to reach that next valid snap point rather than returning to the start of the oversized snap area.

@kevers-google do you have additional thoughts about what the spec text should look like.

[flackr]

As some additional examples of what this looks like, I've recorded a couple videos of this in chrome and safari:

Chrome

Safari

Firefox has similar behavior.

[fantasai]

@flackr What you're asking for is definitely what the spec had always intended in 5.2.2, so that seems like a UA bug, no?

I see that the wording added in 6964742 made the key sentence confusing, though. We should fix that.