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

【问题标题】：Chrome flickering on -webkit-filter: blurChrome 在 -webkit-filter 上闪烁：模糊
【发布时间】：2014-06-30 10:26:00
【问题描述】：

我正在对页面正文应用模糊过渡

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

老问题，但仍然适用于遇到同样问题的人：经过数小时的搜索终于意识到 chrome 遇到了这样的问题。我找到的最接近的解决方案是应用：

滤镜：模糊（0.3px）；

再降低像素（尝试了 0、0.1 和 0.2），它就会变成空白。

这会稍微降低清晰度，但会降低到非常低/不明显的水平（比闪烁要好得多）。

【讨论】：

【解决方案3】：

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

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

backface-visibility: hidden;

【讨论】：