RESOLVED DUPLICATE of bug 297770 297732
backdropFilter does not allow url() filters 
https://bugs.webkit.org/show_bug.cgi?id=297732
Summary backdropFilter does not allow url() filters
hurst-status09
Reported 2025-08-21 09:38:49 PDT
Chrome allows developers to use url() as a backdropFilter in a webpage, Webkit and Gecko do not support it. This allows you to make more complex effects.
Attachments
Add attachment proposed patch, testcase, etc.
hurst-status09
Comment 1 2025-08-21 13:53:18 PDT
An example of this is a filter made to look similar to a piece of glass (sorry for the length): <div style="position: absolute; width: 200px; height: 200px; border-radius: 30px; background: rgba(255, 255, 255, 0.4); box-shadow: white 0px 0px 4px 0px inset; cursor: grab; backdrop-filter: blur(1px) url(&quot;data:image/svg+xml;utf8,%3Csvg%20height%3D%22200%22%20width%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cfilter%20id%3D%22displace%22%20color-interpolation-filters%3D%22sRGB%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeImage%20x%3D%220%22%20y%3D%220%22%20height%3D%22200%22%20width%3D%22200%22%20href%3D%22data%3Aimage%2Fsvg%2Bxml%3Butf8%2C%253Csvg%2520height%253D%2522200%2522%2520width%253D%2522200%2522%2520viewBox%253D%25220%25200%2520200%2520200%2522%2520xmlns%253D%2522http%253A%252F%252Fwww.w3.org%252F2000%252Fsvg%2522%253E%250A%2520%2520%2520%2520%253Cstyle%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520.mix%2520%257B%2520mix-blend-mode%253A%2520screen%253B%2520%257D%250A%2520%2520%2520%2520%253C%252Fstyle%253E%250A%2520%2520%2520%2520%253Cdefs%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253ClinearGradient%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%253D%2522Y%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x1%253D%25220%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x2%253D%25220%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y1%253D%25223%2525%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y2%253D%252297%2525%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cstop%2520offset%253D%25220%2525%2522%2520stop-color%253D%2522%25230F0%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cstop%2520offset%253D%2522100%2525%2522%2520stop-color%253D%2522%2523000%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252FlinearGradient%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253ClinearGradient%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520id%253D%2522X%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x1%253D%25223%2525%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x2%253D%252297%2525%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y1%253D%25220%2522%2520%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y2%253D%25220%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cstop%2520offset%253D%25220%2525%2522%2520stop-color%253D%2522%2523F00%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cstop%2520offset%253D%2522100%2525%2522%2520stop-color%253D%2522%2523000%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%253C%252FlinearGradient%253E%250A%2520%2520%2520%2520%253C%252Fdefs%253E%250A%250A%2520%2520%2520%2520%253Crect%2520x%253D%25220%2522%2520y%253D%25220%2522%2520height%253D%2522200%2522%2520width%253D%2522200%2522%2520fill%253D%2522%2523808080%2522%2520%252F%253E%250A%2520%2520%2520%2520%253Cg%2520filter%253D%2522blur(2px)%2522%253E%250A%2520%2520%2520%2520%2520%2520%253Crect%2520x%253D%25220%2522%2520y%253D%25220%2522%2520height%253D%2522200%2522%2520width%253D%2522200%2522%2520fill%253D%2522%2523000080%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%253Crect%2520x%253D%25220%2522%2520y%253D%25220%2522%2520height%253D%2522200%2522%2520width%253D%2522200%2522%2520fill%253D%2522url(%2523Y)%2522%2520class%253D%2522mix%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%253Crect%2520x%253D%25220%2522%2520y%253D%25220%2522%2520height%253D%2522200%2522%2520width%253D%2522200%2522%2520fill%253D%2522url(%2523X)%2522%2520class%253D%2522mix%2522%2520%252F%253E%250A%2520%2520%2520%2520%2520%2520%253Crect%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520x%253D%25227.5%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520y%253D%25227.5%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520height%253D%2522185%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520width%253D%2522185%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520fill%253D%2522%2523808080%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520rx%253D%252230%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520ry%253D%252230%2522%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520filter%253D%2522blur(7.5px)%2522%250A%2520%2520%2520%2520%2520%2520%252F%253E%250A%2520%2520%2520%2520%253C%252Fg%253E%250A%253C%252Fsvg%253E%22%20result%3D%22displacementMap%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22displacementMap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20scale%3D%22106%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20values%3D%221%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%201%200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20result%3D%22displacedR%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22displacementMap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20scale%3D%22103%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20values%3D%220%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%201%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%201%200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20result%3D%22displacedG%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22displacementMap%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20scale%3D%22100%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20values%3D%220%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%201%200%200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%200%200%200%201%200%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20result%3D%22displacedB%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeBlend%20in%3D%22displacedR%22%20in2%3D%22displacedG%22%20mode%3D%22screen%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CfeBlend%20in2%3D%22displacedB%22%20mode%3D%22screen%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Ffilter%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%3C%2Fsvg%3E#displace&quot;) blur(2px) brightness(1.1) saturate(1.5); left: 616px; top: 144px;" id="test1"></div> on Google Chrome it looks as intended: https://github.com/user-attachments/assets/b5ff5ab5-b5ba-43a7-8a5c-bcbd3f85d8f5 but on Safari 26 (Webkit) due to the lack of url() support it looks like: https://github.com/user-attachments/assets/c1791a39-5e0d-4a74-9ee3-0e3e163e36f0
Karl Dubost
Comment 2 2025-08-28 00:24:34 PDT
*** This bug has been marked as a duplicate of bug 297770 ***
Note You need to log in before you can comment on or make changes to this bug.