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://github.com/WICG/overscroll-be...
Keywords: InRadar
: 179266 (view as bug list)
Depends on:
Blocks:
 
Reported: 2017-09-06 07:13 PDT by Majid Valipour
Modified: 2018-09-10 08:07 PDT (History)
14 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

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)