4

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)

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

      a month later

      Right 🙁

        a month later

        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.

          Merged 1 post from CSS: `backdrop-filter: blur` doesn't work.
            No one is typing