Nested backdrop-filters: might not correctly define whether outer filtered backdrop affects backdrop image for inner backdrop-filter

[dbaron]

@estelle raised an issue about the correct rendering of a testcase with nested backdrop-filter.

In this testcase Gecko renders differently from Chromium/WebKit.

I replied (part 1, part 2) that:

I think WebKit/Chromium is probably correct based on the intent of the spec (as described in a "NOTE" in § 3. Backdrop Root) but I think Gecko is probably correct based on following actual normative steps in the spec (in § 2.1. Filtering and Clipping and in the section above).

In particular, the definition of backdrop root says that the intent of the definition is that ancestors of the backdrop root not contribute to the backdrop root image. However, I think in the actual normative text in the spec, I don't see anything that excludes (from the backdrop image used for the inner backdrop-filter) the filtered backdrop that is painted as part of painting a backdrop root that is a backdrop root because it has the outer backdrop-filter.

In other words, I think the mechanism for backdrop-filter describes painting the filtered backdrop as part of painting the element with the backdrop-filter, which contradicts the note that says that painting the backdrop root and its descendants isn't affected by the backdrop root's ancestors (since, read literally, I think it is, since as far as I can tell that definition includes painting the filtered backdrop of the ancestor).

[mfreed7]

In other words, I think the mechanism for backdrop-filter describes painting the filtered backdrop as part of painting the element with the backdrop-filter, which contradicts the note that says that painting the backdrop root and its descendants isn't affected by the backdrop root's ancestors (since, read literally, I think it is, since as far as I can tell that definition includes painting the filtered backdrop of the ancestor).

Having written that note, I can confirm your interpretation. The filtered version of the backdrop painted in the outer element should be an input to the inner backdrop filter. I considered that to be part of the outer backdrop filter element itself. The note was meant to imply that the ancestors directly should not be an input to the inner backdrop filter.

[dbaron]

Oops, I was interpreting it the other way around (thinking the note meant that the spec's intent was that the ancestors should not contribute, even indirectly). But it's useful to know you meant it the other way. :-)

[estelle]

There are two issues in the original test case.

2) It appears that Chrome/Edge don't render backdrop-filter on inline elements. See this test case.

1) Back to the first issue: I would expect the nested element to have some backdrop filter effect. I would expect the behavior to be a multiplier, so invert on the parent with invert on a descendant would revert the descendant back to the original, which would be useful in some very cool effects. But, minimally, I would expect backdrop-filter: contrast(0) to render an element's background fully gray no matter where that element is found.

[dbaron]

Good catch -- so the interop difference in the original testcase was due to a different issue -- but I think the spec ambiguity here probably still should be fixed.

[dbaron]

https://crbug.com/1123089 is the Chromium bug about backdrop-filter on inlines (which suggests that maybe it's not that it does nothing, but that it's filtering the wrong region)