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.

[ADTC]

Here's my strange collector test results (left is Chrome, right is Safari):

Here's a minimal example that reproduced with these results (left is Chrome, right is Safari):

BTW I'm using CodePen because MDN Playground is frustratingly acting up for me. But I copy-pasted in MDN Playground and the results are exactly the same.

Edit: Moved the additional info to a separate comment.

[ADTC]

Additionally, I'm noticing that Safari has a Developer Feature Flag for unprefixed backdrop filter, which is marked as Testable (I noticed that all Stable feature flags are enabled by default, while all Testable ones are disabled by default):

If I enable this testable feature flag "CSS Unprefixed Backdrop Filter" and reload the page, it changes the result drastically in Safari (notice that the -webkit version suddenly starts working with variables too):

Also it's important to note that disabling developer features by unchecking "Show features for web developers" in Safari doesn't solve the problem.

It also doesn't stop the Testable feature flag from having an effect. The flag still applies whether the dev features are shown or hidden, which is very dangerous and creates the chance for inconsistent Safari setups.

@caugner could you check what you see in Safari 18.3 feature flags when you search for backdrop?