Bug 149553

Summary: `mix-blend-mode` on element over an element using `-webkit-backdrop-filter` is not respected if element is not forced onto a layer
Product: WebKit Reporter: Antoine Quint <graouts>
Component: Layout and RenderingAssignee: Matt Woodrow <mattwoodrow>
Status: RESOLVED FIXED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, chrisjshull, dino, graouts, mattwoodrow, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 9   
Hardware: Mac   
OS: OS X 10.11   
Attachments:
Description Flags
Testcase
none
Safari 15.6 and STP 151 differ from other browsers none

Antoine Quint
Reported 2015-09-25 02:16:08 PDT
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.
Attachments
Testcase (978 bytes, text/html)
2015-09-25 02:16 PDT, Antoine Quint 		no flags
Details
Safari 15.6 and STP 151 differ from other browsers (1.15 MB, image/png)
2022-08-13 08:18 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2015-09-25 02:16:36 PDT
<rdar://problem/22854172>
Ahmad Saleem
Comment 2 2022-08-13 08:18:06 PDT
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
Comment 3 2023-09-19 18:57:13 PDT
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
Comment 4 2023-09-19 19:09:34 PDT
Pull request: https://github.com/WebKit/WebKit/pull/17956
EWS
Comment 5 2023-09-26 13:55:33 PDT
Committed 268477@main (b6fc29dd94bd): <https://commits.webkit.org/268477@main> Reviewed commits have been landed. Closing PR #17956 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.