Applying a css 'opacity' setting to an element can change whether it renders in front or behind the contents of another element's shadow dom
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: stephcomeau, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.4972.0 Safari/537.36 Edg/102.0.1224.0
Steps to reproduce:
See this simple repro of the issue on stackblitz -
https://stackblitz.com/edit/typescript-25e79g?file=index.ts
Actual results:
Given a custom element with an element in its shadow dom with a position of 'absolute' or 'fixed', other elements in the light DOM surrounding the custom element will render "behind" the element in the shadow dom, but if the light DOM element has an opacity setting it will render "in front".
Expected results:
Consistent results. Opacity should not change the visible "stacking" when elements are rendered. (I'm guessing the elements with an opacity setting should remain "behind")
|
||
Comment 1•4 years ago
|
||
But opacity does affect the stacking context per https://www.w3.org/TR/css-color-3/#transparency
|
||
Comment 2•4 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 3•4 years ago
•
|
||
We match Chromium and WebKit on your linked testcase, so there's no Firefox-specific issue here, as far as I can tell, and I think this behavior is required by web specs.
I think what you're seeing is a result of the fact that opacity causes the text to form its own stacking context, as Robert mentioned.
Here's a reduced testcase -- if you load this in any browser, you'll see that the word "Regular" is covered up by the green div, whereas the word "Transparent" is visible and stacks on top (in all browsers):
data:text/html,<div style="position:absolute; top:16px; background:green;height:400px;width:400px"></div>Regular<span style="opacity:0.8">Transparent
While this might seem odd, it's required by specs, particularly the spec text that Robert linked above (saying that non-1 opacity values create a stacking context), and probably also https://www.w3.org/TR/CSS2/zindex.html (which differentiates between "an inline element that generates a stacking context" and those that do not).
--> Closing as not-a-Firefox bug given that we're interoperable with other browsers on this, and the interoperable behavior (I think) matches spec requirements here.
Description
•