[csswg-drafts] [css-contain][css-overflow] Setting containment on root should not make scrolling impossible (#9003)

mirisuzanne has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain][css-overflow] Setting containment on root should not make scrolling impossible ==
Container size queries provide a number of advantages over media (viewport) size queries, besides the ability to query nested elements. In order to access those benefits, and also provide a 'default' outer container, authors will commonly want to add containment to the root element . In addition, authors rarely rely on intrinsic sizing of the root - setting `html { height: 100%; }` is a well established pattern in reset styles, to size with the viewport – making the root a good candidate for 2-axis `size` containment.

The resulting expectation is that this should work:

```css
html {
  container-type: size;
  block-size: 100%; /* extrinsic viewport height */
  overflow: auto; /* scrollbars if needed */
}
```

However, this doesn't currently work as expected in any browser. See this [simplified demo on codepen](https://codepen.io/miriamsuzanne/pen/jOQrdXe?editors=0100). The primary issue seems to be a combination of factors:

1. `size` containment (and the explicit `height` or `block-size` properties) keeps the root element from resizing to it's contents
2. The root element never shows scrollbars, they are always propagated to the viewport
3. In many cases, the body element `overflow` value is used instead of the root element `overflow`
4. `layout` containment stops propagation of the `overflow` property from the body to the viewport 

This seems partially supported by a combination of the [CSS Overflow](https://drafts.csswg.org/css-overflow-3/#overflow-propagation) and [CSS Containment](https://drafts.csswg.org/css-contain-2/#contain-property) specs, but in a convoluted and incomplete way that doesn't seem intentional. From what I can tell, this is a bug in all browsers:

- Containment should only stop propagation of properties defined on the body element, not properties defined on root
- UAs should only defer to the body overflow when the root overflow is `visible`

In another conversation, @fantasai has also suggested that we might want to explicitly propagate root containment to the viewport.

---

Note that this also causes issues if we change the containment to `inline-size`, because it generates a new root positioning context on root. Since overflow still propagates, and root isn't able to be a scroller itself, `position: fixed` elements no longer remain in view when scrolling. I have another [slightly more complicated pen](https://codepen.io/miriamsuzanne/pen/zYMqBJP?editors=0100) that helps explore all the various interactions. In order to achieve roughly the desired outcome with either 1d or 2d containment, authors would currently have to set:

```css
html {
  container-type: size; /* or inline-size */
}

html, body {
  block-size: 100%;
}

body {
  overflow: auto;
}
```

This allows the body to act as the outer scroller, with fixed elements still positioned by the root.

Ideally, our solution here should allow both `size` and `inline-size` root containers, without breaking viewport overflow or fixed positioning.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9003 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 23 June 2023 21:24:17 UTC