Created attachment 462523 [details] Compare chrome (left) and safari (right) displacement Reproduction: https://codepen.io/tarngerine/pen/poVrLEe Expected: See feDisplacementMap filter effect the "Hello" text Actual: No effect Given an HTML element with CSS applied `backdrop-filter`, with a `url(#...)` referencing an SVG `<filter>`, the filter will not be properly applied. It works in Chromium (see attachment)
I am able to reproduce this in Safari 16 and Safari Technology Preview 154 and it does not show any effect on "Hello" while Chrome Canary 108 does show distortion effect and Firefox does not show similar to Safari but it could be due to -webkit-. Thanks!
<rdar://problem/100539266>
Created attachment 462714 [details] Simpler repro test case
SVG color matrix filters as backdrop-filters don't seem to work either? e.g. defining <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="matrix-test"> <feColorMatrix type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"> </feColorMatrix> </filter> </svg> and setting -webkit-backdrop-filter: url(#matrix-test); backdrop-filter: url(#matrix-test); works in firefox, brave, chrome, etc, but not Safari.
Created attachment 467229 [details] -webkit-backdrop-filter: url() doesn't work under Mac and IOS Almost the year passed from bug discovering? Would it be fixed?
Comment on attachment 467229 [details] -webkit-backdrop-filter: url() doesn't work under Mac and IOS https://codepen.io/vanyadoing/pen/YzRbZEQ
Here is where the bug can be checked https://codepen.io/vanyadoing/pen/YzRbZEQ