Bug 297770

Summary:

filter: url() ignored when backdrop-filter applied

Product:

WebKit

Reporter:

philipp.sklorz.development

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

REOPENED

Severity:

Normal

CC:

bfulgham, hurst-status09, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

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

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.