Html Chrome闪烁-webkit过滤器：模糊

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

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

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

添加

-webkit背面可见性：hidden

无法解决此问题。它似乎消除了第一次闪烁，但在应用模糊后，Chrome会一直闪烁，尤其是当主体包含大量内容/div时

---

有没有办法在没有闪烁的情况下达到同样的效果？

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

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

---

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

过滤器：模糊（0.3px）

再降低像素（尝试0、0.1和0.2），它将变为空白

---

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

如果过滤器属性应用于某个元素，铬合金MacOS Mojave 10.14上的闪烁仍然存在

在同一图元上设置为“隐藏”可解决以下问题：

backface-visibility: hidden;

---

遗憾的是，对于Chrome糟糕的渲染问题，我们无能为力。我希望他们在发布新功能之前花点时间把事情做好……我看不到这些变化。它可以从法线平滑过渡到模糊。Chrome的特定版本？桌面版？刚刚开始看到这一点（稳定34.0.1847.137），在Canary 37.0.2002.0中，使用背面可见性：隐藏，事情看起来更好