[csswg-drafts] [will-change] Should `will-change: transform` establish a containing block for fixed background attachments? (#11811)

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

== [will-change] Should `will-change: transform` establish a containing block for fixed background attachments? ==
https://drafts.csswg.org/css-transforms/#containing-block-for-all-descendants

> any value other than none for the [transform](https://drafts.csswg.org/css-transforms/#propdef-transform) property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

The first 2 things are covered in https://drafts.csswg.org/css-will-change/#valdef-will-change-custom-ident

> If any non-initial value of a property would cause the element to generate a containing block for absolutely positioned elements, specifying that property in [will-change](https://drafts.csswg.org/css-will-change/#propdef-will-change) must cause the element to generate a containing block for absolutely positioned elements.
> 
> If any non-initial value of a property would cause the element to generate a containing block for fixed positioned elements, specifying that property in [will-change](https://drafts.csswg.org/css-will-change/#propdef-will-change) must cause the element to generate a containing block for fixed positioned elements.

But what about fixed background attachments, does `will-change: transform` establishes a containing block for them?

```html
<!DOCTYPE html>
<style>
article {
  display: inline-block;
  height: 100px;
  overflow: hidden;
}
div {
  width: 100px;
  height: 192px;
  background: linear-gradient(to top, red, red) repeat-x fixed 0% 0% / 100px 100px green;
}
</style>
<article><div></div></article>
<article><div style="transform: scale(1)"></div></article>
<article><div style="contain: layout"></div></article>
<article><div style="will-change: transform"></div></article>
<article><div style="will-change: contain"></div></article>
<script>
for (let el of document.querySelectorAll("article")) {
  el.scrollTop = el.scrollHeight;
}
</script>
```

 - Gecko, Blink: yes
   ![Image](https://github.com/user-attachments/assets/f9c17c08-71c4-42dc-b3cb-342594badc8f)
 - WebKit: no
   ![](https://github.com/user-attachments/assets/1cf6805b-9c2b-47f0-8c45-426f268df6d9)


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


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

Received on Monday, 3 March 2025 15:12:18 UTC