CODEWITHSUNDEEP
csssafariwebkit
Atis
Atis

Reputation: 93

-webkit-backdrop-filter not working on Safari

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?

Upvotes: 6

Views: 17217

Answers (2)

kvsur
kvsur

Reputation: 21

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.

Upvotes: 2

Simerl
Simerl

Reputation: 186

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

Upvotes: 17

Related Questions