1955739 - <dialog> is layered below elements with opacity

Status: RESOLVED INVALID

(Core :: Graphics: WebRender, defect)

Description

[Xidorn Quan [:xidorn] UTC+10]

Attachment: dialog.html

Please see the attached file. I expect that either none of or both of the <div>s should cover the green dialog element, but what happens is that the one without opacity is below the dialog, while the one with opacity is above it.

I do notice that this behavior is consistent across all browsers I tested including Chrome and Safari, but I don't quite understand the logic behind it. I don't expect that opacity could affect z-position of the element itself.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

opacity causes a new stacking context to be created. Within a single stacking context, absolutely positioned elements paint on top of statically-positioned elements.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

e.g. you can use any other stacking-context-creating property to get the same effect: position: relative, isolation, ...