1718824 - Fixed element renders like position absolute with CSS filter applied to body element

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[norbert landsteiner]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

1. HTML element with "position fixed" as direct descendant of the body element
2. Apply CSS filter to body element ("filter: grayscale(97.5%) brightness(116%);")

Example:
https://www.masswerk.at/gravioroids/
Click the tiny button "B/W" in the top right corner of the window to toggle the CSS filter.

Actual results:

Layout for the child element switches to / behaves like "position absolute", when the filter is applied.
The layout switches back to "position fixed", when the filter is removed.

Behavior is consistent in 78.11.0esr and 89.0.2 (64-bit) / current.
Maybe related to https://bugzilla.mozilla.org/show_bug.cgi?id=1423746 (not sure)?

Expected results:

No layout changes are expected.

Comment 1

[norbert landsteiner]

Should have added: the child element has a positive z-index applied.
(The bug may relate to heirarchy / stacking issue.)

Comment 2

[Timea Cernea [:tbabos][inactive]]

Moving it over to it's component so developers can check it out if this is indeed a duplicate or related to Bug 1423746.

Comment 3

[Timothy Nikkel (:tnikkel)]

Attachment: prefs.js needed to reproduce

Comment 4

[Timothy Nikkel (:tnikkel)]

Attachment: filbd.html

I think this is a testcase for what is described.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

This is expected and per spec. Filter creates a containing block just like transforms, only the root element is special (we used to be bogus there but I fixed that in bug 1423746).

Comment 6

[Timothy Nikkel (:tnikkel)]

So Safari/Chrome don't follow the spec then? The div doesn't move in them.