[css-will-change] Does will-change: z-index establish a stacking context? #11827
Description
https://drafts.csswg.org/css-will-change/#valdef-will-change-custom-ident
If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
What does this mean for z-index? Just by itself it can't always establish a stacking context, but it can in some cases:
- On flex and grid items
- When
positionisn't static
So should will-change: position establish a stacking context when these conditions don't hold?
Does will-change: positionestablish a stacking context? |
Blink | WebKit | Gecko | Servo |
|---|---|---|---|---|
| By default | ✔ | ✔ | ❌ | ❌ |
| On positioned element | ✔ | ✔ | ✔ | ✔ |
| On flex item | ✔ | ✔ | ✔ | ✔ |
| On grid item | ✔ | ✔ | ✔ | ✔ |
<!DOCTYPE html>
<style>
p { display: inline-block; background: red; width: 100px; margin: 0 }
p::before { content: ""; display: block; position: relative; z-index: -1; background: green; height: 100px; }
</style>
<p style="will-change: z-index"></p>
<p style="will-change: z-index; position: relative"></p>
<div style="display: inline-flex">
<p style="will-change: z-index"></p>
</div>
<div style="display: inline-grid">
<p style="will-change: z-index"></p>
</div>