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

@ericjbasti's comment was useful:

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 the .canvaswrapper div in css with animation @keyframes. You might use var image = new Image(); on canvas and then blur it.

The performance was WAAAYYYY better than using blur in CSS, especially with animations.

Answer 2

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.