html - Chrome 在 -webkit-filter : blur 上闪烁

Question

我正在对我的页面主体应用模糊过渡

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

当我将 blurred 类添加到 body 时，Chrome 会闪烁，而 Safari 不会。

http://jsfiddle.net/j89Zs/

添加 -webkit-backface-visibility: hidden 没有解决这个问题。它似乎消除了第一次闪烁，但 Chrome 在应用模糊后一直闪烁，尤其是当 body 包含大量内容/div 时。

有没有什么办法可以达到同样的效果，而且没有闪烁？

Answer 1

我没有看到闪烁(OSX Mavericks 上的 Chrome 35.0)，但我发现以下方法通常可以解决 webkit 中的动画闪烁问题:

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