[w3ctag/design-reviews] Other Spec Review: Single-Axis Scroll Containers (Issue #1222)

freedebreuil created an issue (w3ctag/design-reviews#1222)

### Specification

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

### Explainer

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

### Links

- A description of the problems that end-users were facing before this proposal:

A common issue web developers run into is creating a table with labels on the top and left sides, and needing to keep those labels visible both as the table scrolls horizontally and the page scrolls vertically. Without this, users can lose context while scrolling large tables, especially on mobile. `position: sticky` is widely used for this, but it has the limitation that both axes must stick to the same scroller.

Another common issue is when creating a scrollable container that should move in only one direction, developers have no way guarantee that the off-axis stays in place. Historically, when even one `overflow` axis is given a scrollable value, CSS `overflow` also converts the other axis to a scrollable value. This leads to issues when calling DOM scroll APIs such as `scrollIntoView()`, where the off-axis can move unintentionally.

Please see the explainer for details.

- Alternatives considered: 

[Explainer Alternatives Considered](https://github.com/explainers-by-googlers/single-axis-scroll-containers/tree/main#alternatives-considered)

- Examples of how to use the proposal to solve the end-users' problems:

[Explainer Proposal and Examples](https://github.com/explainers-by-googlers/single-axis-scroll-containers/tree/main#proposal)

- What do the end-users experience with this proposal: 

Developers can create real single axis scroll containers matching users expectations when using them. End-users can keep labels on both axes visible as they scroll a large table on a mobile device. They do not see what appears to be a buggy offset of items when navigating to an off-screen carousel item. They see web pages that are easier to understand and use.

- User research you did to validate the problem and/or design, if any:

- Developer feedback:
  - https://github.com/w3c/csswg-drafts/issues/865
  - https://github.com/w3c/csswg-drafts/issues/8286
  - https://github.com/w3c/csswg-drafts/issues/9140
  - https://github.com/w3c/csswg-drafts/issues/2496
  - https://github.com/w3c/csswg-drafts/issues/12289
  - https://github.com/w3c/csswg-drafts/issues/13677

- Web Platform Tests:

wpt.fyi/results/css/css-position/sticky/position-sticky-single-axis-basic.html
wpt.fyi/results/css/css-position/sticky/position-sticky-single-axis-dynamic-axis-change-crash.html
wpt.fyi/results/css/css-position/sticky/position-sticky-single-axis-dynamic.html
wpt.fyi/results/css/css-position/sticky/position-sticky-single-axis-nested.html
wpt.fyi/results/css/css-position/sticky/position-sticky-single-axis-used-values.html
wpt.fyi/results/css/css-overflow/single-axis-scroll-apis.html


### The specification

- [x] Follows the [Web Platform Design Principles](https://www.w3.org/TR/design-principles/).
- [x] Includes Security and Privacy Considerations sections based on answers to the [Security/Privacy Questionnaire](https://www.w3.org/TR/security-privacy-questionnaire/).

### Where and by whom is the work is being done?

- GitHub repo: https://github.com/w3c/csswg-drafts/
- Primary contacts:
  - Free Debreuil (@freedebreuil), Google, author
  - Robert Flack (@flackr), Google, spec work
  - Vladimir Levin (@vmpstr), Google, reviewer
- Organization/project driving the specification: Google
- This work is being funded by: Google
- Primary standards group developing this feature: CSSWG
- CSSWG has discussed the design:
  - https://github.com/w3c/csswg-drafts/issues/12289
  - https://github.com/w3c/csswg-drafts/issues/9140
  - https://github.com/w3c/csswg-drafts/issues/865

### Feedback so far

- Multi-stakeholder feedback:
  - Chromium comments:
    - ChromeStatus: https://chromestatus.com/feature/5067363861004288
    - Blink-dev Intent to Prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/mnATiT8Eu8A
  - Mozilla comments: (add link to RFP)
  - WebKit comments:  (add link to RFP)
- Major unresolved issues with or opposition to this specification:
  none
- Status/issue trackers for implementations:
  - Chromium: https://chromestatus.com/feature/5067363861004288

### You should also know that...

None.

<!-- Content below this is maintained by @w3c-tag-bot -->
---

Track conversations at https://tag-github-bot.w3.org/gh/w3ctag/design-reviews/1222


-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/1222
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/1222@github.com>