CSS variables don't work for -webkit-backdrop-filter

N1ark

Hi, this is my first bug report here so I hope it's correct. It feels like a WebKit bug, but it doesn't occur in Safari, so unsure how to proceed.

My website has an element with the style -webkit-backdrop-filter: var(--backdrop-glossy), where I have defined in :root that --backdrop-glossy: blur(8px). This rule doesn't work however, whereas -webkit-backdrop-filter: blur(8px) (with inlining) works.

If you need to take a look: the website is here, and the element that doesn't blur is the top bar element .ao.

Thanks! 💮

The element properly applies a blur on the backdrop.

Version 0.99.130.2-beta (WebKit 621.1.2.111.4) Build date Dec 28 2024 MacBook Pro (macOS Sequoia 15.0.1 build 24A348)

Sequoia (15)

Yannick

This issue will be resolved in the next public version of the browser, thank you for your message 🙂

AntonioI

@Yannick This still appears to be an issue with the new Version:
0.99.131-beta (WebKit 621.1.2.111.4) Build date Feb 13 2025 Mac 15.3.1 (Build 24D70)

Tested on the tailwind playground:
https://play.tailwindcss.com/QQBFj4sgEd

Yannick

Right 🙁

ditto4356

I noticed a lot of webpages having issues with semi-backgrounds making text hard to read, so I decided to see if these pages were attempting to use backdrop-filter: blur; and it turns out that CSS feature stopped working in Orion on desktop at some point. It still works fine on mobile.

For example, here's how the MDN demo page for the feature looks in Orion on desktop:

MDN demo page

Enabling compatibility mode doesn't change it.

Here's what this page should look like, taken in Safari 18.3.1:

Note the blurred background behind "Example".

0.99.131.0.2-beta (WebKit 621.1.2.111.4)

Sequoia (15)

Edit: it appears that backdrop-filter is entirely broken, not just the blur filter.

Pasithea0

Still broken. Would love a fix!

Pasithea0

One day this will get fixed 😞

dino

Pasithea0 It's already working on recent releases. Can you please update Orion to latest release and try?

If still don't work, can you please try resetting WebKit flags and relaunch Orion

Yannick

One day, I promise.

Pasithea0

Yes it looks like this has been properly fixed since my last post. Thanks!