Firefox bug: after applying filter to an element, all its positioned descendants behave like the element was positioned

[m-khvoinitsky]

While it has been fixed in 0.6.12 by using backdrop-filter, it is not enabled by default in Firefox, so in order to experience the fix, you need to:

• use at least Firefox 70
• enable backdrop-filter (layout.css.backdrop-filter.enabled → true in about:config)
• enable WebRender (gfx.webrender.all → true in about:config)

---

It causes number of issues with Invert method like #50, #143, Facebook messenger floating window issue, etc.

https://bugzilla.mozilla.org/show_bug.cgi?id=1258421
https://bugzilla.mozilla.org/show_bug.cgi?id=1106895

Different issue, but for the reference: #40 (comment)

[m-khvoinitsky]

According to https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed, this is expected behavior:

It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

[m-khvoinitsky]

While it has been fixed in 0.6.12 by using backdrop-filter, it is not enabled by default in Firefox, so in order to experience the fix, you need to:

• use at least Firefox 70
• enable backdrop-filter (layout.css.backdrop-filter.enabled → true in about:config)
• enable WebRender (gfx.webrender.all → true in about:config)