Exploring an interesting example (taken from this source), showcasing the application of the same feTurbulence/feDisplacementMap SVG filter to two HTML elements. One element uses a CSS filter(), while the other employs a CSS backdrop-filter(). On Chrome, both elements display the distortion correctly; however, on Firefox and Safari, only the one utilizing filter() shows the effect, leaving the one with backdrop-filter() unaffected.
.modal {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 5px;
color: #333;
font-family: sans-serif;
line-height: 1.5;
max-width: 50%;
padding: 1rem 2rem;
backdrop-filter: url(#filter-turbulence);
background-color: rgba(255, 255, 255, 0.5);
}
.modal p:last-child {
filter: url(#filter-turbulence);
}
/* misc. irrelevant styles for demo */
html, body { height: 100%; width: 100%; } body { background-image: url('https://41.media.tumblr.com/efd15be8d41b12a7b0ef17fba27c3e20/tumblr_mqqy59HMaf1qzattso1_1280.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } a { color: #bf0222; }<svg height="0">
<defs>
<filter id="filter-turbulence">
<feTurbulence
type="turbulence"
baseFrequency="0.01"
numOctaves="4"
result="turbulence"
/>
<feDisplacementMap
in2="turbulence"
in="SourceGraphic"
scale="30"
xChannelSelector="R"
yChannelSelector="G"
/>
</filter>
</defs>
</svg>
<div class="container">
<div class="modal">
<p>The background behind these paragraphs uses a SVG filter with backdrop-filter(). The background behind it should be distorted.</p>
<p>This paragraph uses a SVG filter with filter(). The text should be distorted.</p>
</div>
</div>The debugging process has been challenging as Safari and Firefox do accept the filter in filter(), but not in backdrop-filter(). Moreover, no error messages are generated in the console or CSS inspector of either browser.
Attempts with simpler SVG filters confirm that Chrome and Safari support SVG backdrop-filters, especially effects like blur/desaturate. However, there seems to be difficulty rendering any combination of
feTurbulence and/or feDisplacement within a backdrop-filter in these browsers.
Are there possible errors in how my filters are defined that cause Chromium to tolerate them while other browsers reject? Or could there be some limitations in the backdrop-filter implementations of other browsers that I haven't discovered yet?