1918926 - CSS filter makes 3D-transformed elment invisible

Status: UNCONFIRMED

(Core :: Web Painting, defect)

Description

[psychpsyo]

Attachment: hoverVisibility.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Steps to reproduce:

I applied a CSS filter (brightness) to a transform-style: preserve-3d element on hover.
Inside this element, there is a single transform: rotate()d element.

To actually reproduce this:

1. Open the attached file.
2. Hover the green square.
3. Observe that it turns red.
4. (optional) Observe that this does not happen in Chromium.

Actual results:

When hovering the outer element, the inner element becomes invisible.

Expected results:

The inner element should stay visible and have the filter applied to it.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Timothy Nikkel (:tnikkel)]

Reproduces with 2020-06-01 build, ie before webrender, so more likely to be display list issue.

Comment 3

[psychpsyo]

Oh, I forgot to add:
This isn't specific to brightness() and rotate(), it works with all filters and transforms that I've tried so far. (like grayscale() and translate())

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.