CSS Blur Filter Performance

Question

I\'m creating a website that has an ::after element with a backgound and a CSS3 blur applied. I\'ve noticed that applying the CSS3 blur has a huge detrimental effect on perf

Answer 1

I was having the same problem. I decided to try adding a CSS snippet used for improving performance of 3d CSS translation. It worked! Not sure why - I'd love if someone could enlighten me. (It might just be that the snippet induces GPU rasterization?)

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
transform: translate3d(0,0,0);
transform: translateZ(0);

Note that I applied these styles to the element overlaying the blurred element.

I only did a very limited amount of testing; if anyone wants to do some rigorous benchmarking or provide some insight into this issue, it would be greatly appreciated.