Chrome flickering on -webkit-filter: blur

css, google-chrome, html

Solution

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;

Problem

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?

Original source