https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#scrollable

Motivation

Sometimes it's useful to prevent elements from contributing to the scrollable overflow area. In particular elements that exist for purely decorative purposes. This could i.e. be elements that are animated in the background with 2d or 3d transforms.

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 or 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.

Alternative solutions

Allow a way of clipping overflow that is not a grouping property value and does not force a used style of flat for preserve-3d.

It seems like there's no interop on contain: paint forcing used style of flat for preserve-3d. WebKit does force flat, while Blink and Gecko does not seem to force flat at the moment.

An alternative solution would be remove contain: paint from the grouping property values.

Example

<div class="parallax-scroll-container">
  <div class="decorative-element">...</div>
  ...
</div>

.parallax-scroll-container {
  perspective: 100px;
  overflow: auto;
}

/* 
This element will extend the scrollable overflow area, and using a parent to clip 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;
}