Intent to Ship: Single-axis scroll containers

[Chromestatus]

Contact emails

freede...@google.com

Explainer

https://github.com/explainers-by-googlers/single-axis-scroll-containers

Specification

https://github.com/w3c/csswg-drafts/pull/13903

Summary

Extends the `overflow` property to support scrollable values together with `clip` (for example, `overflow: scroll clip`). This allows `position: sticky` to be constrained by different ancestor scroll containers per axis, and gives authors a way to ensure an axis using `overflow: clip` stays in place.

Blink component

Blink>Layout

Web Feature ID

overflow

Motivation

The CSS `overflow` property currently allows behavior to be specified per axis, but it does not provide a way to make a scroll container responsible for only a single axis. The affects features that depend on scroll containers, namely `position: sticky` and DOM scroll APIs. For example, authors may want to use `position: sticky` to create a table that keeps both the top and left labels in view while the user scrolls through large content. Or they may want to create a carousel that is visually clipped on one axis, while ensuring that `scrollIntoView()` does not unexpectedly move that clipped axis. Please see the explainer for more details.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/865

TAG review

https://github.com/w3ctag/design-reviews/issues/1222

TAG review status

Issues addressed

Goals for experimentation

None

Risks

Interoperability and Compatibility

# overflow: scroll clip overflow: scroll clip used to be converted into overflow: scroll hidden, but this will no longer happen, so there is a compatibility risk. Please see the analysis for more details. (https://docs.google.com/document/d/1_4zPKOQ8S-Ttn-4BTFaIR7YWkkQYNiF_QlTsOK-k7uE/edit?usp=sharing)

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1418)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/680)

Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/8286) https://github.com/w3c/csswg-drafts/issues/9140 https://github.com/w3c/csswg-drafts/issues/865

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

No information provided

Debuggability

No information provided

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/?label=master&label=experimental&aligned&q=single-axis

Flag name on about://flags

No information provided

Finch feature name

SingleAxisScrollContainers

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/440038212

Measurement

Usage is tracked with one broad use counter and three targeted compat counters: SingleAxisScroller (https://chromestatus.com/metrics/feature/timeline/popularity/5862): Counts every element with overflow clip on one axis and a scrollable value on the other — all content this feature could affect. Note that the following three have landed quite recently: SingleAxisScrollerOverscrollBehavior (https://chromestatus.com/metrics/feature/timeline/popularity/5976): Counts those elements that also set a non-auto overscroll-behavior on the clip axis, where scroll chaining could change. SingleAxisScrollerPositionSticky (https://chromestatus.com/metrics/feature/timeline/popularity/5975): Counts sticky elements whose horizontal and vertical constraints now resolve against different scroll containers. SingleAxisScrollerAutoMinSize (https://chromestatus.com/metrics/feature/timeline/popularity/5977): Counts flex/grid items whose automatic minimum size now applies where it previously collapsed to zero, so layout can change. The last two fire only when the new behavior actually changes something, so if many sites were affected it would show directly in these metrics.

Estimated milestones

Shipping on desktop	153
Shipping on Android	153
Shipping on WebView	153

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No information provided

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5067363861004288?gate=6477880110481408

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/69b81554.050a0220.87ff1.0e40.GAE%40google.com

This intent message was generated by Chrome Platform Status.