Bug 176454 - Implement CSS overscroll-behavior
Summary: Implement CSS overscroll-behavior
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Frédéric Wang (:fredw)
URL: https://drafts.csswg.org/css-overscro...
Keywords: InRadar
: 179266 (view as bug list)
Depends on: 192358 192397
Blocks:
  Show dependency treegraph
 
Reported: 2017-09-06 07:13 PDT by Majid Valipour
Modified: 2019-01-16 03:16 PST (History)
16 users (show)

See Also:


Attachments
Testcase (2.70 KB, text/html)
2018-09-10 08:07 PDT, Frédéric Wang (:fredw)
no flags Details
WIP Patch (CSS parsing only) (67.14 KB, patch)
2018-09-10 08:07 PDT, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
WIP Patch (CSS parsing only) (16.18 KB, patch)
2018-09-26 07:55 PDT, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
Testcase of annoying scroll chaining (630 bytes, text/html)
2018-10-31 04:32 PDT, Frédéric Wang (:fredw)
no flags Details
WIP Patch (CSS parsing and preference option) (26.17 KB, patch)
2018-11-15 05:23 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
WIP Patch (33.37 KB, patch)
2018-11-27 07:43 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
WIP Patch (33.37 KB, patch)
2018-11-28 10:21 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
WIP Patch (33.58 KB, patch)
2018-11-28 10:32 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
Add overscroll behavior property to scrolling tree (7.64 KB, patch)
2018-11-29 07:59 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
WIP Patch (53.63 KB, patch)
2018-12-03 14:50 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
Patch (53.88 KB, patch)
2018-12-04 03:18 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff
Patch (applies on top of bug 192358) (52.88 KB, patch)
2018-12-04 09:16 PST, Frédéric Wang (:fredw)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Majid Valipour 2017-09-06 07:13:08 PDT
Consider implementing the new CSS scroll-boundary-behavior property.

## Specification
This feature specification is being incubated in WICG: 
https://wicg.github.io/scroll-boundary-behavior/


Note that this is first CSSWG spec which is going through this new process). 

Additional background on this feature may be found here: 
https://github.com/w3c/csswg-drafts/issues/769

## Summary
CSS scroll-boundary-behavior standardizes a supercharged version of "-ms-scroll-chaining". It
allows developers to determine the browser's behavior once a scroller has reached its full extent.
The unused delta can be propagated to the parent causing scroll chaining, create a glow/bounce
effect without chaining, or just get consumed silently. In particular when used on viewport
defining element, it controls if overscroll can be used for navigation actions such as pull-to-
refresh or swipe navigation.


scroll-boundary-behavior: auto | contain | none

  * `auto`: propagate scroll to the parent scroller. If there is no parent scroller (e.g.,
    viewport) user-agent may perform a default action (e.g. navigation) or show any appropriate
    overscroll UI affordance. This is the default value.
  * `contain`: do not propagate. The user agent may show an appropriate overscroll UI affordance
    such as bounce or glow.
  * `none`: same as contain but also prevents any overscroll UI affordance e.g. bounce or glow.

There will be scroll-boundary-behavior-{x,y} long-hands to control each axis individually.


## Current State
The specification and API has received positive feedback and support from EdgeHTML [1], Mozilla
[2], Chromium[3], and web developers [4,5]. We at Chromium have an implementation landed in
Canary (behind a feature flag**). If we don't receive any strong negative signal we plan to ship
in M63 per intent-to-ship. [3]
 

[1] https://github.com/w3c/csswg-drafts/issues/769#issuecomment-270228948
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=951793#c11
[3] https://groups.google.com/a/chromium.org/d/msg/blink-dev/OqBNF2efmFA/3ByBUKyaCgAJ
[4] https://github.com/w3c/csswg-drafts/issues/769#issuecomment-279832555
[5] https://github.com/w3c/csswg-drafts/issues/769#issuecomment-288878908

** --enable-web-platform-experimental-features or --enable-blink-features=CSSScrollBoundaryBehavior
Comment 1 Radar WebKit Bug Importer 2017-09-07 13:56:45 PDT
<rdar://problem/34315997>
Comment 2 Benoit Girard 2017-11-22 10:29:26 PST
The property has been renamed to 'overscroll-behavior': https://github.com/WICG/overscroll-behavior

There's been no major changes otherwise.
Comment 3 Simon Fraser (smfr) 2017-12-07 10:45:20 PST
*** Bug 179266 has been marked as a duplicate of this bug. ***
Comment 4 Frédéric Wang (:fredw) 2018-09-10 08:07:08 PDT
Created attachment 349309 [details]
Testcase
Comment 5 Frédéric Wang (:fredw) 2018-09-10 08:07:48 PDT
Created attachment 349310 [details]
WIP Patch (CSS parsing only)
Comment 6 Frédéric Wang (:fredw) 2018-09-26 07:55:08 PDT
Created attachment 350862 [details]
WIP Patch (CSS parsing only)

Use runtime instead of compile time flag
Comment 7 Frédéric Wang (:fredw) 2018-10-31 04:32:04 PDT
Created attachment 353488 [details]
Testcase of annoying scroll chaining

This is a simple use case showing when scroll chaining can be annoying. If you scroll the overflow node to its maximum limit, release it and try to scroll it any further then the scrolling is propagated to the main frame (expected scroll chaining behavior). Then if you don't wait a bit but scroll immediately the overflow node again in the other direction, then the scrolling still applies to the main frame. The "position: fixed" is not essential here, but it can make things even more confusing since one does not see the overflow node moving when the main frame is scrolled.
Comment 8 Frédéric Wang (:fredw) 2018-11-15 05:23:57 PST
Created attachment 354920 [details]
WIP Patch (CSS parsing and preference option)
Comment 9 Frédéric Wang (:fredw) 2018-11-27 07:43:54 PST
Created attachment 355733 [details]
WIP Patch
Comment 10 Frédéric Wang (:fredw) 2018-11-28 10:21:11 PST
Created attachment 355887 [details]
WIP Patch

Just some minor change with respect to the 355733, so that "non-local boundary default actions" (e.g. scroll chaining or navigation) are now blocked for overscroll-behavior: none or contain. For now this works on macOS and GTK on attachment 349309 [details] but iOS uses a different code path.
Comment 11 Frédéric Wang (:fredw) 2018-11-28 10:32:19 PST
Created attachment 355888 [details]
WIP Patch

Sorry, I uploaded the wrong patch. Here is the correct one. Also I forgot to say that this only blocks scrolling via the mouse, not via the keyboard (my chromium release on Linux seems to have the same behavior).
Comment 12 Frédéric Wang (:fredw) 2018-11-29 07:59:53 PST
Created attachment 356006 [details]
Add overscroll behavior property to scrolling tree
Comment 13 Frédéric Wang (:fredw) 2018-12-03 14:50:11 PST
Created attachment 356410 [details]
WIP Patch

@smfr: I tried to experiment with UIScrollView's bounces/alwaysBounceHorizontal/alwaysBounceVertical but unfortunately it does not seem possible to use them to disable/enable bouncing in independent directions. I don't see any straightforward UIScrollView API to disable scroll chaining. I guess UIScrollView should probably have an overscroll property none/contain/auto so that it is possible to enable/disable things like bouncing or scrolling chaining (more generally local and non-local boundary default actions) via the UIKitSPI. I understand this is proprietary code and hence has to be handled by Apple, right? If so, can you please comment on rdar://problem/34315997 ?

This patch passes the horizontal/vertical overscroll behavior to the UI process, but probably it would be cleaner to move the OverscrollBehavior enum in ScrollTypes.h
Comment 14 Frédéric Wang (:fredw) 2018-12-04 03:18:25 PST
Created attachment 356479 [details]
Patch
Comment 15 Frédéric Wang (:fredw) 2018-12-04 09:16:44 PST
Created attachment 356505 [details]
Patch (applies on top of bug 192358)
Comment 16 Frédéric Wang (:fredw) 2018-12-06 01:23:56 PST
There is a WPT manual test at https://w3c-test.org/css/css-overscroll-behavior/overscrollBehavior-manual.html
Comment 17 jonjohnjohnson 2018-12-10 13:57:50 PST
Definitely know I'm being a sort of busy body, but sincerely wondering if the webkit implementation of `overscroll-behavior` using the `contain` (or even `none`) value will allow for the same scroll containment in iOS that is showcased in in the following quite complex and hacked link:

https://bugs.webkit.org/attachment.cgi?id=356972&action=edit
https://bugs.webkit.org/attachment.cgi?id=356972

Meaning, we won't have to resort to such a mess to get this user experience?