How to animate backdrop-filter?

user_13042229 0
Viewed 10029

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.

css-transitions css
3 Answers

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.

user_25276370

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

user_116988250

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.

user_108504900
Related