297770 2025-08-22 01:26:05 -0700 filter: url() ignored when backdrop-filter applied 2025-08-28 16:41:12 -0700 1 1 1 Unclassified WebKit Layout and Rendering WebKit Nightly Build Mac (Apple Silicon) macOS 15 REOPENED https://bugs.webkit.org/show_bug.cgi?id=184601 https://bugs.webkit.org/show_bug.cgi?id=245510 HasReduction, InRadar P2 Normal --- 1 philipp.sklorz.development webkit-unassigned bfulgham hurst-status09 karlcow simon.fraser webkit-bug-importer zalan oldest_to_newest 2138189 0 476487 philipp.sklorz.development 2025-08-22 01:26:05 -0700 Created attachment 476487 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) 2138625 1 simon.fraser 2025-08-25 10:38:14 -0700 Accelerated filters (including backdrop-filter) can't use SVG filters, sadly. 2138626 2 webkit-bug-importer 2025-08-25 10:38:21 -0700 <rdar://problem/159117210> 2138882 3 philipp.sklorz.development 2025-08-26 13:21:33 -0700 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. 2139280 4 karlcow 2025-08-28 00:24:34 -0700 *** Bug 297732 has been marked as a duplicate of this bug. *** 2139281 5 karlcow 2025-08-28 00:26:23 -0700 *** This bug has been marked as a duplicate of bug 245510 *** 2139343 6 philipp.sklorz.development 2025-08-28 06:04:22 -0700 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. 2139526 7 karlcow 2025-08-28 16:41:12 -0700 OOOps you are right my bad. 476487 2025-08-22 01:26:05 -0700 2025-08-22 01:26:05 -0700 test case filter-url-ignored-when-backdrop-filter-applied.html text/html 1038 philipp.sklorz.development PCFET0NUWVBFIGh0bWw+CjxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KPHRpdGxlPmZpbHRlcjogdXJs KCkgaWdub3JlZCB3aGVuIGJhY2tkcm9wLWZpbHRlciBhcHBsaWVkPC90aXRsZT4KCjxwPkV4cGVj dGVkOiB0d28gZ3JlZW4gYm94ZXMuPC9wPgo8ZGl2IGNsYXNzPSJib3ggcC0xIj48L2Rpdj4KPGRp diBjbGFzcz0iZmlsdGVyLXN2ZyBwLTEiPjwvZGl2Pgo8ZGl2IGNsYXNzPSJib3ggcC0yIj48L2Rp dj4KPGRpdiBjbGFzcz0iZmlsdGVyLWZuIHAtMiI+PC9kaXY+Cgo8c3ZnPgogICAgPGZpbHRlciBp ZD0iaW52ZXJ0IiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgogICAgICAgIDxm ZUNvbXBvbmVudFRyYW5zZmVyPgogICAgICAgICAgICA8ZmVGdW5jUiB0eXBlPSJ0YWJsZSIgdGFi bGVWYWx1ZXM9IjEgMCIgLz4KICAgICAgICAgICAgPGZlRnVuY0cgdHlwZT0idGFibGUiIHRhYmxl VmFsdWVzPSIxIDAiIC8+CiAgICAgICAgICAgIDxmZUZ1bmNCIHR5cGU9InRhYmxlIiB0YWJsZVZh bHVlcz0iMSAwIiAvPgogICAgICAgIDwvZmVDb21wb25lbnRUcmFuc2Zlcj4KICAgIDwvZmlsdGVy Pgo8L3N2Zz4KCjxzdHlsZT4KICAgIC5ib3ggewogICAgICAgIGJhY2tncm91bmQ6ICNiZjQwYmY7 IC8qIGR1bGwgbWFnZW50YSAqLwogICAgfQoKICAgIC5maWx0ZXItc3ZnIHsKICAgICAgICBmaWx0 ZXI6IHVybCgjaW52ZXJ0KTsKICAgICAgICBiYWNrZHJvcC1maWx0ZXI6IHNhdHVyYXRlKDIpOwog ICAgfQoKICAgIC5maWx0ZXItZm4gewogICAgICAgIGZpbHRlcjogaW52ZXJ0KDEpOwogICAgICAg IGJhY2tkcm9wLWZpbHRlcjogc2F0dXJhdGUoMik7CiAgICB9CgogICAgLnAtMSwgLnAtMiB7CiAg ICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgIHdpZHRoOiAxMDBweDsKICAgICAgICBo ZWlnaHQ6IDEwMHB4OwogICAgICAgIHRvcDogMTAwcHg7CiAgICB9CgogICAgLnAtMSB7CiAgICAg ICAgbGVmdDogNjBweDsKICAgIH0KCiAgICAucC0yIHsKICAgICAgICBsZWZ0OiAyNDBweDsKICAg IH0KPC9zdHlsZT4K