css.properties.backdrop-filter - There is no full support in Safari 18. We still need -webkit- prefix, and we can't use CSS variables.

[ADTC]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

MDN states that there's full support in Safari 18 for backdrop-filter. This is incorrect. We still need -webkit- prefix. Also, CSS variables do not work on -webkit-backdrop-filter in Safari. It will only accept fixed values.

What browsers does this problem apply to, if applicable?

Safari

What did you expect to see?

Support should indicate the vendor prefix, and Known issues should state that CSS variables do not work in Safari for -webkit-backdrop-filter.

Did you test this? If so, how?

I tested with Safari Desktop (macOS) Version 18.3 (19620.2.4.111.8, 19620) by using ONLY backdrop-filter and it didn't work.

Note: The example on this page (News from WWDC24: WebKit in Safari 18 beta | WebKit) is incorrect and very misleading. Load the CodePen in Safari, then disable the -webkit- prefixed CSS that's hiding towards the end of the CSS file. You'll notice it stops working completely.

Also, while -webkit-backdrop-filter works, it only does so with fixed values like blur(5px). If I use CSS variables, it doesn't work even if the variable resolves to a valid value or a valid fallback value.

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#browser_compatibility

https://caniuse.com/css-backdrop-filter

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: 2025-02-13T17:16:33.478Z

[caugner]

@ADTC Can you please provide a minimal example to reproduce the issue, ideally using MDN Playground?

The data was updated in #23367, and I just verified that the collector test is still passing in Safari 18.3, because CSS.supports("backdrop-filter", "inherit") returns true in Safari 18.

Edit: I was able to use a CSS variable inside backdrop-filter, see this Playground.