Bug 149553 – `mix-blend-mode` on element over an element using `-webkit-backdrop-filter` is not respected if element is not forced onto a layer

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Antoine Quint]

Created attachment 261921 [details]
Testcase

The attached test case shows an element using the `mix-blend-mode` CSS property rendered above an element using the `-webkit-backdrop-filter` property. If the overlaid element is not forced onto a layer, the `mix-blend-mode` property has no effect.

[Radar WebKit Bug Importer]

<rdar://problem/22854172>

[Ahmad Saleem]

Created attachment 461579 [details]
Safari 15.6 and STP 151 differ from other browsers

I am able to reproduce this bug from attached test case using Safari 15.6 and Safari Tech. Preview 151 as can be seen from attached screenshot. Thanks!

[Matt Woodrow]

I think the test case is expecting the wrong behaviour here.

backdrop-filter establishes a stacking context, so we're using the mix-blend-mode for the tint over transparency (within that stacking context).

The layer case is the wrong one, where we are applying mix-blend-mode of the tint over the filtered backdrop.

If you add the unprefixed 'backdrop-filter' so that this tests works in other browsers, then our behaviour matches for the un-layerised case and is different for the layerised one.

Still a bug to fix, but if you want the tint to be blended with 'darken' into the filtered backdrop, then 'tint' needs to be a sibling of 'panel', not a child.

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/17956

[EWS]

Committed 268477@main (b6fc29dd94bd): <https://commits.webkit.org/268477@main>

Reviewed commits have been landed. Closing PR #17956 and removing active labels.