CODEWITHSUNDEEP
csssafari
Plamen Dobrev
Plamen Dobrev

Reputation: 73

Backdrop-filter doesn't work on Safari (most of the times)

I'm using Safari for the very first time and I noticed something weird about the backdrop filters, while they work on some sections, they just refuse to do so on other ones. Or, they load randomly one time (I noticed that this usually happens after clearing the cache but since I'm working on an expandable menu, the next time I close it and reopen it again, the filter is gone) and... yeah, I've pretty much just cleared it up... they are gone once again. What's the reason for that?

nav {
    background: rgba(0, 0, 0, 0.85);
    overflow: auto;
    height: 100%;
    flex: 0 0 0px;
    flex-grow: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 8;
    margin-top: 50px;
    transition: all 700ms;
}

Upvotes: 2

Views: 1501

Answers (1)

Lee
Lee

Reputation: 3101

This is a redraw/repaint bug. I've had similar, where the backdrop filter doesn't display until you trigger a redraw by editing something in the devtools for example.

For my use case, I waited until transitionend before triggering a repaint

setTimeout(() => {
  el.style.display = "table";
  el.offsetHeight;
  el.style.display = "block";
});

There are other methods of course for triggering it, but that should point you in the right direction.

Upvotes: 5

Related Questions