How to animate backdrop-filter?

Question

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.

Answer 1

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.

Answer 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);