Bug 297770

Summary: filter: url() ignored when backdrop-filter applied
Product: WebKit Reporter: philipp.sklorz.development
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: REOPENED    
Severity: Normal CC: bfulgham, hurst-status09, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: HasReduction, InRadar
Version: WebKit Nightly Build   
Hardware: Mac (Apple Silicon)   
OS: macOS 15   
See Also: https://bugs.webkit.org/show_bug.cgi?id=184601
https://bugs.webkit.org/show_bug.cgi?id=245510
https://bugs.webkit.org/show_bug.cgi?id=322588
Attachments:
Description Flags
test case none

philipp.sklorz.development
Reported 2025-08-22 01:26:05 PDT
Created attachment 476487 [details] test case When a the backdrop-filter and filter property are applied to the same element, referencing a svg filter with `filter: url()` has no effect. This is unexpected since using a filter function like `filter: invert()` works. Steps to reproduce: ------------------- open the attached test case or see https://codepen.io/2pinch/pen/VYvxWeM Expected results: ----------------- both squares should be green Notes ----- - Tested in Webkit 299043@main and Safari 18.6 (20621.3.11.11.3)
Attachments
test case (1.01 KB, text/html)
2025-08-22 01:26 PDT, philipp.sklorz.development 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2025-08-25 10:38:14 PDT
Accelerated filters (including backdrop-filter) can't use SVG filters, sadly.
Radar WebKit Bug Importer
Comment 2 2025-08-25 10:38:21 PDT
<rdar://problem/159117210>
philipp.sklorz.development
Comment 3 2025-08-26 13:21:33 PDT
Ah, that's unfortunate. Is there a way to make an element switch to the non-accelerated filter path? My current case is to apply this to a single 50x50px element which I suspect to be uncritical performance-wise for a filter chain without heavy stuff like blurs.
Karl Dubost
Comment 4 2025-08-28 00:24:34 PDT
*** Bug 297732 has been marked as a duplicate of this bug. ***
Karl Dubost
Comment 5 2025-08-28 00:26:23 PDT
*** This bug has been marked as a duplicate of bug 245510 ***
philipp.sklorz.development
Comment 6 2025-08-28 06:04:22 PDT
While this is related to bug 245510 this isn't strictly a duplicate. The given example works in Gecko, which also doesn't support using svg filter in backdrop-filter, but allows `filter: url(#...)` when a backdrop-filter is applied. This is only intended to provide additional context, which I hope will be helpful.
Karl Dubost
Comment 7 2025-08-28 16:41:12 PDT
OOOps you are right my bad.
Note You need to log in before you can comment on or make changes to this bug.