CSS stain filter effect

Question

I am building a website with :: after element with backgound and CSS3 blur. I noticed that applying CSS3 blur has a huge negative effect on performance.

When using CSS3 blur, a drop of 10-20 frames per second (from 60 frames per second) occurs.

I used CSS3 filters to apply blur, because this is the general code applied to images that I want blurry, i.e. I do not want to use the image editor to blur images manually.

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

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

ps, I do not mind using javascript, jquery, css or html elements.

Answer 1

I had the same problem. I decided to try adding a CSS snippet used to improve 3D CSS translation performance. It worked! I don’t know why - I would like someone to enlighten me. (Maybe only a fragment 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 on the blurred element.

I did a very limited number of tests; if someone wants to conduct a thorough benchmarking or give some idea about this problem, it would be highly appreciated.

Answer 2

Comment by @ericjbasti was helpful:

I added

 <canvas id="myFogCanvas"></canvas> 

then in scss,

 .canvaswrapper{position: relative;} #myFogCanvas{ position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background-color: transparent; } 

then in js

 var canvas = document.getElementById("myFogCanvas"); var ctx = canvas.getContext('2d'); //all the drawing stuff for canvas ... moveTo, lineTo, etc. ctx.filter = 'blur(15px)'; ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'; ctx.lineWidth = 5; ctx.stroke(); 

then I was able to animate div.canvaswrapper in css with @keyframes animation. You can use var image = new Image (); on canvas and then blur it.

WAAAYYYY's performance is better than using blur in CSS, especially with animations.