[filter-effects-2] Should backdrop-filter respect clip-path?

[cbrewster]

https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty

Step 4 in section 2.1 states:

4. Apply a clip to the contents of T’, using the border box of element B, including border-radius if specified. Note that the children of B are not considered for the sizing or location of this clip.

Currently backdrop-filter only clips to the border box and border radius, but there are cases where a web author may want to also use a clip-path to clip the backdrop-filter effect.

Apple is using this with a text clip path on https://www.apple.com/apple-arcade/
(See the text "Games that redefine games." when viewing in Safari).

https://css-tricks.com/a-glassy-and-classy-text-effect/ goes over this effect a bit more.

Is there any particular reason we only clip to the border box and border radius?

[mfreed7]

So step 4 of the spec relates to what clipping happens on just the backdrop-filtered image. There is no limitation on applying a mask or clip-path to the entire element, which will clip both the backdrop-filtered image and the content inside the element itself.

Note that there was a bug in Chrome 76 that caused clip paths and masks not to apply to the backdrop-filtered image. That bug was fixed in Chrome 77, releasing this week. I tried the sample site referenced by the css-tricks post, and it seems to work correctly in Chrome 77 and beyond.

It appears that the apple-arcade site sniffs Chrome and disables the backdrop-filter effect, unfortunately.

With the above information - are you ok closing this bug?

[cbrewster]

@mfreed7 Ah yes, I also missed step 6 which would apply the clip to the element and the filtered backdrop.