-
Notifications
You must be signed in to change notification settings - Fork 757
Description
https://drafts.csswg.org/css-transforms/#containing-block-for-all-descendants
any value other than none for the 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 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 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?
<!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>Metadata
Metadata
Assignees
Labels
Type
Projects
Status
Status

