Chrome在-webkit-filter上闪烁:模糊

Question

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

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

当我将模糊的类添加到正文时,Chrome会闪烁,而Safari则不会.

添加-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;