246106 2022-10-05 14:21:14 -0700 [Filters] CSS filters are not applied to SVG elements 2025-12-08 20:19:23 -0800 1 1 1 Unclassified WebKit SVG WebKit Nightly Build Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=261806 https://github.com/webcompat/web-bugs/issues/137838 BrowserCompat, InRadar P2 Normal --- 1 sabouhallawa webkit-unassigned azin+webkit circuitcoder0 daniel.schulz f.olszewski karlcow maggotfish mark mgilbert pietro.tarsitano sabouhallawa shosioness123q takeyou.dev tuanglen webkit-bug-importer zimmermann oldest_to_newest 1903525 0 462818 sabouhallawa 2022-10-05 14:21:14 -0700 Created attachment 462818 test case (an SVG <rect> with style `filter: drop-shadow(...)`) Open the attached test case. Result: Only a 100x100 green rectangle is drawn Expected: A 100x100 green rectangle with black drop shadow is drawn. 1903528 1 sabouhallawa 2022-10-05 14:21:43 -0700 rdar://95175811 2039420 2 f.olszewski 2024-06-03 06:54:50 -0700 Use this workaround that I discovered whilst chatting with GPT4: "it was a webkit bug. I found it. Can you give me even more workarounds, maybe similar properties or so?" -> Instead of relying on CSS to apply the filter, you can define an SVG filter within your SVG and apply it to the image element. SVG filters are more universally supported in terms of functionality across different browsers, including Safari. Here's an example of how you can apply a grayscale effect using an SVG filter: xml Copy code <svg width="200" height="200"> <defs> <filter id="grayscale-filter"> <feColorMatrix type="matrix" values="0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0"/> </filter> </defs> <image filter="url(#grayscale-filter)" href="your-image-url.jpg" x="0" y="0" height="200px" width="200px"/> </svg> 2040926 3 471657 azin+webkit 2024-06-11 21:26:35 -0700 Created attachment 471657 Test case (an HTML and an SVG file) covering root SVG and inline/external symbols 2040927 4 azin+webkit 2024-06-11 21:27:50 -0700 I ran into this bug when looking for a workaround for bug 275304. After testing, it looks like presentation attribute (CSS) filters are only applied to the root SVG element. For context, the specification requires the filter attribute to apply to all graphics elements, <use>, and all containers except for <defs>. The extent of this bug means there's no known workaround for bug 275304, rendering a large amount of SVG filter applications impossible to achieve in WebKit. I've included a test case that demonstrates (A) that the filter presentation attribute fails when applied directly to a shape; (B) that it succeeds when applied to a root <svg> element; and (D) that there is no apparent workaround for applying a filter to external symbols (<use> referencing an external <symbol>). 2055193 5 tuanglen 2024-08-25 00:43:49 -0700 I created a minimal code sample to demonstrate the problem. It uses 2 <rect>s and 2 CSS rules. This problem causes interactive elements in a nice SVG interface that works well in Chrome and Firefox to be non-responsive when using Safari. Here it is in a codepen: https://codepen.io/tuanglen/pen/eYwrXam We can't just fall back to the fancier SVG <feComponentTransfer> that is supposedly the "equivalent" of CSS `filter: brightness()` because the results (on browsers that have both types of filters) look so much better with CSS's `filter: brightness()` than with SVG's `<feComponentTransfer>`. In Chrome and FF, smooth gradients remain smooth with `filter: brightness` but turn ugly and banded with `<feComponentTransfer>`. Ironically, `<feComponentTransfer>` in Safari handles gradients better than `<feComponentTransfer>` in Chrome or FF, but Safari needs the CSS filters such as `filter: brightness` to work, too. 2106101 6 shosioness123q 2025-03-26 02:16:55 -0700 Thank you for filing. The appropriate engineers have been notified https://blockblastadventure.com 2109777 7 mark 2025-04-08 13:20:09 -0700 (In reply to azin+webkit from comment #4) > I ran into this bug when looking for a workaround for bug 275304. > > After testing, it looks like presentation attribute (CSS) filters are only > applied to the root SVG element. For context, the specification requires the > filter attribute to apply to all graphics elements, <use>, and all > containers except for <defs>. > > The extent of this bug means there's no known workaround for bug 275304, > rendering a large amount of SVG filter applications impossible to achieve in > WebKit. > > I've included a test case that demonstrates (A) that the filter presentation > attribute fails when applied directly to a shape; (B) that it succeeds when > applied to a root <svg> element; and (D) that there is no apparent > workaround for applying a filter to external symbols (<use> referencing an > external <symbol>). Thank you very much, applying the filter to the root element solves my use case, so this workaround is perfect. I'm applying a glow filter to an SVG logo and putting the css class with the filter on the root element means it works identically on Safari as in other browsers. 462818 2022-10-05 14:21:14 -0700 2022-10-05 14:21:14 -0700 test case (an SVG <rect> with style `filter: drop-shadow(...)`) test-svg-ccs-filter.html text/html 194 sabouhallawa PHN0eWxlPgogIHJlY3QgewogICAgICBmaWxsOiBncmVlbjsKICAgICAgZmlsdGVyOiBkcm9wLXNo YWRvdygxNnB4IDE2cHggMCBibGFjayk7CiAgfQo8L3N0eWxlPgo8Ym9keT4KICAgIDxzdmcgd2lk dGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogICAgICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEw MCIgLz4KICA8L3N2Zz4KPC9ib2R5Pgo= 471657 2024-06-11 21:26:35 -0700 2024-06-11 21:26:35 -0700 Test case (an HTML and an SVG file) covering root SVG and inline/external symbols Expanded SVG CSS filter test case.zip application/zip 1636 azin+webkit UEsDBBQACAAIAPRYzFgAAAAAAAAAAJ0BAAAJACAAZGVidWcuc3ZnVVQNAAcNH2lmEB9pZg0faWZ1 eAsAAQT1AQAABBQAAAClUMEOgyAMPetXND1thwnO7LKAv2IUmZIgGHCifz+cO88sSw9tXtv3Xsv8 3MEsnVfWcMyzHGEZtPEc+2ka74SEELJQZNZ15EopJXEeyzRhfh0aq0G1HOUySWdqXT2UjlVlTbV3 EXaEY+vsePF93dpwcrIFGuN2RohMCRPKCS1BLBwLiiDWPce1K31TaI6NfkoEsimTnbxMj1309Sh/ Fjny/M2EsR/5P09j25/LF1BLBwiyczlqrQAAAJ0BAABQSwMEFAAIAAgA9FjMWAAAAAAAAAAAsAAA ABQAIABfX01BQ09TWC8uX2RlYnVnLnN2Z1VUDQAHDR9pZhAfaWZMI2lmdXgLAAEE9QEAAAQUAAAA Y2AVY2dgYmDwTUxW8A9WiFCAApAYAycQGwFxHRCD+BsYiAKOISFBUCZIxwIgFkBTwogQl0rOz9VL LCjISdXLSSwuKS1OTUlJLElVDggGKfTfk5YGorV9DE1ANABQSwcI1PGb+lwAAACwAAAAUEsDBBQA CAAIAPtazFgAAAAAAAAAAL0HAAAKACAAZGVidWcuaHRtbFVUDQAH2yJpZp8iaWbbImlmdXgLAAEE 9QEAAAQUAAAAxVVRa9swEH5ufoWmQklgiZ2EwVgtv3Tt2NMK6QZ7Cop9iQWyFKRLnPz7nWy3rAtO CEs3/CBbuvvu+06frOTd5293Tz8f71mBpU57SRiYlmYlOBgeJkDmae8qKQElywrpPKDg358ehh/5 y7yRJQi+VVCtrUPOMmsQDMVVKsdC5LBVGQzrj/dMGYVK6qHPpAYxHsU1DirUkM5+fGFLpREcy2Gx WSVRM99LooZIL1nYfB8SinH66MBTGYnKGiYRnVpsEFj/bjYbPMMgeKTkMaX0QtYk/Wq0MsBAQ0nJ nhYnab00TR+aHEJTTZAv5JoAl1JpP6DIaajstyu2BeepquDj0ZizXamNF7xAXH+KoqqqRtV0ZN0q msRxHFF8kHiVZMplGli2E3waU5f2zegEn9BAhLXgC70B3pIXPHd2PSQSua36DnIW0/NhwFlU4wXk 8NJB3lmL7EbjLYXdrPCW9f0mywDyv5NyityZUoOUVkm7Qfc7gjdSM78vF1Z37BC8RF10jzYeWOFg SfKCAUe0cP1cat4on1szr4u+Jt/Jr1bxzwnWVY8ybG0SHEKgjUPekKSxLb2TDjrN+X9a+7i2Qzu3 /5tXZu46spf1cus8lQve4B8YOIS9xX+pLvxHt647OPxu0c6+XPYMHW1Me3BOST23dWe25vD4XtEl 2Fx+pD/c1r8AUEsHCFSJcrkBAgAAvQcAAFBLAwQUAAgACAD7WsxYAAAAAAAAAACwAAAAFQAgAF9f TUFDT1NYLy5fZGVidWcuaHRtbFVUDQAH2yJpZkwjaWZMI2lmdXgLAAEE9QEAAAQUAAAAY2AVY2dg YmDwTUxW8A9WiFCAApAYAycQGwFxHRCD+BsYiAKOISFBUCZIxwIgFkBTwogQl0rOz9VLLCjISdXL SSwuKS1OTUlJLElVDggGKbxumZEGog9fPsgNogFQSwcIDqif+lwAAACwAAAAUEsBAhQDFAAIAAgA 9FjMWLJzOWqtAAAAnQEAAAkAIAAAAAAAAAAAAKSBAAAAAGRlYnVnLnN2Z1VUDQAHDR9pZhAfaWYN H2lmdXgLAAEE9QEAAAQUAAAAUEsBAhQDFAAIAAgA9FjMWNTxm/pcAAAAsAAAABQAIAAAAAAAAAAA AKSBBAEAAF9fTUFDT1NYLy5fZGVidWcuc3ZnVVQNAAcNH2lmEB9pZkwjaWZ1eAsAAQT1AQAABBQA AABQSwECFAMUAAgACAD7WsxYVIlyuQECAAC9BwAACgAgAAAAAAAAAAAApIHCAQAAZGVidWcuaHRt bFVUDQAH2yJpZp8iaWbbImlmdXgLAAEE9QEAAAQUAAAAUEsBAhQDFAAIAAgA+1rMWA6on/pcAAAA sAAAABUAIAAAAAAAAAAAAKSBGwQAAF9fTUFDT1NYLy5fZGVidWcuaHRtbFVUDQAH2yJpZkwjaWZM I2lmdXgLAAEE9QEAAAQUAAAAUEsFBgAAAAAEAAQAdAEAANoEAAAAAA==