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

Question

我将模糊过渡应用到页面正文

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

当我将模糊的类添加到正文时，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;

Answer 2

老问题但是对于那些会在这里遇到同样问题的人来说仍然存在：经过几个小时的搜索终于意识到铬已经出现了这样的问题。我找到的最接近的解决方案是申请：

过滤器：模糊（0.3px）;

再次降低像素（尝试0,0.1和0.2）并且它变为空白。

这会略微降低清晰度，但会降低到非常小/不明显的水平（比闪烁更好）。

Answer 3

Chrome 中的 MacOS Mojave 10.14 上仍然存在闪烁，以防将filter属性应用于元素。

在同一元素上将backface visibility设置为隐藏可解决此问题：

backface-visibility: hidden;