css.properties.backdrop-filter - SVG filters not supported in Firefox or Safari

[Inclushe]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

Despite SVG filters working with the filter property in Firefox and Safari, it does not appear to work on the backdrop-filter property.

What browsers does this problem apply to, if applicable?

Firefox, Safari

What did you expect to see?

For Example 1, a dithered pattern inside a draggable cyan box should appear. For Example 2, text distortion should occur inside the red circles.

Did you test this? If so, how?

This behavior was observed in the following links: Example 1: https://codepen.io/inclushe/pen/WNqZpMy Example 2: https://codepen.io/kitasenjudesign/pen/NWwQPgN

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

MDN metadata

MDN page report details

• Query: css.properties.backdrop-filter
• Report started: 2024-08-10T21:02:04.340Z