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 performance.

With CSS3 blur applied, there is about a 10 - 20 frames/second drop (from 60fps).

The reason I used CSS3 filters to apply a blur was because this is generic code applied to images that I want blurred, ie, I don't want to use an image editor to blur the images manually.

.blur::after {     background-image:url(dog.png);     filter:blur(3px); } 

So, my question is, are there alternatives to using filter: to blur an element and its background that have better performance without using an image editor?

ps, I don't mind using javascript, jquery, css, or html elements.

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.