Bug 223021 - CSS scroll snap should allow scrolling to the middle of snap areas that overflow the snapport
Summary: CSS scroll snap should allow scrolling to the middle of snap areas that overf...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Martin Robinson
URL:
Keywords: InRadar
: 223175 (view as bug list)
Depends on: 223986 224326 227062
Blocks: 218115
  Show dependency treegraph
 
Reported: 2021-03-10 01:54 PST by Martin Robinson
Modified: 2021-06-29 00:14 PDT (History)
8 users (show)

See Also:


Attachments
Patch (77.97 KB, patch)
2021-03-17 03:15 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (79.86 KB, patch)
2021-03-17 07:48 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (80.20 KB, patch)
2021-03-23 03:11 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (23.38 KB, patch)
2021-05-18 03:18 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (15.99 KB, patch)
2021-06-25 02:40 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Robinson 2021-03-10 01:54:02 PST
In the "Snapping Boxes that Overflow the Scrollport" section [1] of the CSS Scroll Snap specification, it reads:

  If the snap area is larger than the snapport in a particular axis, then any scroll
  position in which the snap area covers the snapport, and the distance between the
  geometrically previous and subsequent snap positions in that axis is larger than
  size of the snapport in that axis, is a valid snap position in that axis. The UA 
  may use the specified alignment as a more precise target for certain scroll operations
  (e.g. explicit paging).

In order to implement this behavior, the scroll snap selection code needs to know the size of snap areas when choosing snap points during scrolling. This is perhaps a good moment to rework the scroll snap data structure so that it will be able to support masonry layouts as well.

1. https://drafts.csswg.org/css-scroll-snap-1/#snap-overflow
Comment 1 Radar WebKit Bug Importer 2021-03-17 02:54:13 PDT
<rdar://problem/75518606>
Comment 2 Martin Robinson 2021-03-17 03:15:18 PDT
Created attachment 423466 [details]
Patch

Here's some background on these changes as they are a bit larger and more complicated than normal:

Before this change when snap points were calculated after a layout and a ScrollSnapOffsetsInfo was created with both the offsets of the snap points and a set of ranges of offsets where no snapping occurred. These ranges were useful because it made it simple to determine if a particular offset was subject to snapping. With the implementation of this part of the specification, the range-based approach is not as suitable because snap areas (which may overlap) now affect whether or not a scroll will snap to a snap point.

Instead, this change take a lazier approach. During scrolling, we walk through each potential snap offset and look at the associated snap area. This information to determine if the destination scroll offset falls onto a snap area that overflows the snapport or if it is subject to proximity snapping.
Comment 3 Martin Robinson 2021-03-17 03:15:46 PDT
*** Bug 223175 has been marked as a duplicate of this bug. ***
Comment 4 Martin Robinson 2021-03-17 07:48:46 PDT
Created attachment 423486 [details]
Patch
Comment 5 Martin Robinson 2021-03-23 03:11:43 PDT
Created attachment 424004 [details]
Patch
Comment 6 Martin Robinson 2021-03-31 00:43:26 PDT
Comment on attachment 424004 [details]
Patch

This patch is a little bit, so my plan is to split it up into very simple parts to make it easier to review.
Comment 7 Martin Robinson 2021-05-18 03:18:31 PDT
Created attachment 428925 [details]
Patch
Comment 8 Martin Robinson 2021-06-25 02:40:12 PDT
Created attachment 432249 [details]
Patch
Comment 9 EWS 2021-06-29 00:14:15 PDT
Committed r279364 (239230@main): <https://commits.webkit.org/239230@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 432249 [details].