Chrome flickers on -webkit filter: blur

Question

I apply a transition blur 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 a blurry class to the body, while Safari doesn't.

http://jsfiddle.net/j89Zs/

Adding -webkit-backface-visibility: hiddendoes not solve this. It seems to eliminate the first flicker, but Chrome continues to flicker after applying blur, especially if the body contains a lot of content / divs.

Is there a way to achieve the same effect without flickering?

Answer 1

I don’t see flickering (Chrome 35.0 on OSX Mavericks), but I find that work is often done to optimize the flicker of the animation in webkit:

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