1746769 - Adding "filter" CSS to root element changes the behavior of "position: fixed"

Status: RESOLVED DUPLICATE of bug 1423746

(Core :: General, defect)

Description

[Outvi V]

Attachment: The sample page.

Please see the attached sample page (or https://filter-rendering.netlify.app/ ).

In Firefox (Windows 96 & Linux nightly 2021-12-18) the "position: fixed" element ".box" moves with the page, while in Chromium (Windows 95)/Safari it will stay at the viewport center. A possible reason is that the "filter: greyscale(1)" added to <html> changed the so-called "containing block" of the box element, which - please correct me if I didn't get it right - probably does not conform to the spec:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided..

[https://drafts.fxtf.org/filter-effects/#FilterProperty]