-webkit-backdrop-filter not working on Safari

Question

Safari 14.1.2 not showing -webkit-backdrop-filter: blur(10px); I have tried multiple versions, inline, with jQuery, with @supports but nothing works. Strangest thing is that it is shown as enabled in Safari 'Web Inspector' and works if I toggle it off and back one again. What could be the solution? Is there any workarounds?

Cheddar

Please could you add a workable snippet to your question so we can see the problem for ourselves See stackoverflow.com/help/minimal-reproducible-example – Kira

How does this page look like in your Safari? webkit.org/demos/backdrop-filter – Incessant

Answer 1

Hithere,

I had the same Problem. My Issue was my not 'visible' div in the Beginning. (Bottom-Top-Slideanimation)

 div{
            height: 0px,
            bottom: 0px,
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    }

My solution was:

  div{
                height: 1px,
                bottom: -1px,
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
        }

Now it works.

I hope this is a Solution for you.

Greetings, Simerl

Hedve

Thanks, this answer help me lot of. I have slider with blur effect and it doesn't work. I hope that apple fix this. – Harlow

This doesn't seem like a satisfying solution. I created my own private web UI tool as an alternative to React with full enter and exit animations on every component. It works really well, but based on this solution, it seems that if my components are not immediately mounted/visible, then backdrop blurring will not work in Safari. This definitely is a mistake on Safari's part. – Ending

IE vibes coming up... – Electronarcosis

In my case it's the background of a navigation panel that is not immediately visible. Since the panel is animated with gsap, I give the background blur dynamically before it opens. nonsensical, but it works. – Electronarcosis

Answer 2

If you want [--webkit-]backdrop-filter working, your HTML element must be rendered with actual height and weight when initial render, even just height: 1px; weight: 1px style setting;

My code before:

.mobile-nav {
  position: fixed;
  top: 0;
  heigth: 0px;
  width: 0px;
  background-color: rgba(255,255,255, 0.8);
  backdrop-filter: blur(8px);
  --webkit-backdrop-filter: blur(8px);
  transition: height .5s;
}
// button click event fired, and change classList
.mobile-nav.opened {
  heigth: 72px;
  width: 100vw;
}

My code after(backdrop-filter working on IOS Safari):

.mobile-nav {
  position: fixed;
  top: -72px;
  heigth: 72px;
  width: 100vw;
  background-color: rgba(255,255,255, 0.8);
  backdrop-filter: blur(8px);
  --webkit-backdrop-filter: blur(8px);
  transition: top .5s;
}
// button click event fired, and change classList
.mobile-nav.opened {
  top: 0;
}

Hope this can working for you.

Thought