12

I faced the issue with low fps while using backdrop-filter and transition on the same component.

.modal-background {
   // some styles
   backdrop-filter: blur(2px)
   transition: all .15s linear
}

As simple as that. The animation is glitchy :( But if I comment out backdrop-filter line, things are getting better.

Maria Cornetti
  • 351
  • 1
  • 2
  • 12

3 Answers3

17

You can achieve a different but comparable effect by instead animating the backdrop-filter's opacity() like so:

.bg {
  transition: backdrop-filter 0.2s;
  backdrop-filter: blur(4px) opacity(0);
}

.bg.show {
  backdrop-filter: blur(4px) opacity(1);
}

I have seen some minor graphical glitches when doing this in Chromium. But on the plus side, I've also found this approach to be much more performant than the alternative suggestion of animating a (non-backdrop) filter property's blur(). There's a trade-off to be made between responsiveness and graphical accuracy.

Joss
  • 401
  • 4
  • 7
  • Same effect, but no `show` class needed; this one works well for me: https://stackoverflow.com/a/68632825/4378314 – Kalnode Jul 21 '23 at 15:28
2

I believe, it's a very new property and can't be animated properly yet. You can always restructure something to make work this one instead: filter: blur(7px);

RomanistHere
  • 795
  • 7
  • 17
0

As Roman mentions

its a very new property. Until it got optimized, you have to look for alternatives. More specifically on "filter: blur(6px)":

<div id="root"/>
<div id="modal"/>

If you are trying to apply a backdrop on modal, don't. Go put some listeners on parent (#root) element checks if it has that child modal, apply filter on "#root" and enjoy.

Ayberk Baytok
  • 79
  • 6
  • `filter: blur()` is not equivalent to `backdrop-filter`. One applies internally, the other externally, so to speak. – Kalnode Jul 21 '23 at 15:17