[csswg-drafts] [css-overflow] add method to prevent elements from contributing to scrollable overflow (#8361)

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

== [css-overflow] add method to prevent elements from contributing to scrollable overflow ==
https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#scrollable

Sometimes it's useful to prevent elements from contributing to the scrollable overflow area. In particular elements that exist for purely decorative purposes. This is mostly relevant for elements that have a used value of `position: fixed` or `position: absolute`.

For elements not participating in a 3D rendering context its possible to eliminate them from contributing to the scrollable overflow area by adding `contain: paint`, `overflow: hidden`, `overflow: clip` to a parent, effectively clipping them away.

This is not a workable strategy for elements participating in a 3D rendering context. `contain: paint`, `overflow: hidden` and `overflow: clip` are all grouping property values, and will force the parent element to have a used style of `flat` for `preserve-3d`. This effectively separates the elements from the 3d rendering context they were participating in. 

### Proposal
Add a method to prevent elements from contributing to scrollable overflow. 
This could be a new property such as `overflow-contribution: normal | none`.

### Example
```html
<div class="parallax-scroll-container">
  <div class="decorative-element">...</div>
  ...
</div>
```
```css
.parallax-scroll-container {
  perspective: 100px;
  overflow: auto;
}

/* 
This element will extend the scrollable overflow area, and clipping it 
will prevent it from participating in the perspective transformed 3d rendering context 
*/
.decorative-element {
  --depth: 1.5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh; /* Arbitrary height taller than content */
  transform: translateZ(calc(-100px * (var(--depth) - 1)))
    scale(calc(var(--depth)));
  transform-origin: 50vw 50vh;
}
```

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


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

Received on Thursday, 26 January 2023 07:48:18 UTC