Chrome flickering on -webkit-filter: blur

Question

I'm applying a blur transition to the body of my page

body
    transition(all 1s)
    &.blurred
        pointer-events none
        transition(all 1s)
        -webkit-filter blur(5px)

Chrome flickers when I add the blurred class to body, whereas Safari does not.

http://jsfiddle.net/j89Zs/

Adding -webkit-backface-visibility: hidden does not solve this. It seems to eliminate the first flicker, but Chrome keeps flickering after the blur is applied, especially if body contains a lot of content/divs.

Is there any way to achieve the same effect, without the flickering?

Answer 1

I'm not seeing the flicker (Chrome 35.0 on OSX Mavericks) but I find the following often works for solving animation flickering in webkit:

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

Answer 2

Old question but still for someone who would land here with the same problem: After hours of searching finally realized chrome is got such problems. The closest solution I found was to apply:

filter:blur(0.3px);

Lower the pixel anymore(tried 0, 0.1 and 0.2) and it goes blank.

This will slightly lower the clarity but to a very minimal/unnoticeable Level(much better than the flicker).