使用模糊滤镜模糊框阴影会导致 Webkit 浏览器中出现奇怪的线条答案

【问题标题】：Blurring box-shadow with the blur filter causes strange lines in Webkit browsers使用模糊滤镜模糊框阴影会导致 Webkit 浏览器中出现奇怪的线条
【发布时间】：2015-06-09 03:36:40
【问题描述】：

最近，我在 WebKit 浏览器中遇到了一个有趣且烦人的错误。

以拥有父 DIV（在本例中，我们将使用 .wrapper）和子 DIV (.main) 为例。在.main DIV 上应用盒子阴影，在.wrapper DIV 上应用模糊滤镜。像这样：

.wrapper {
    -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
            filter: blur(3px);
}

.main {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px rgba(0,0,0,1);
}

运行它，您会注意到.main DIV 中有一个网格图案。奇怪的是，这只发生在.main DIV 上没有背景并且.main DIV 应用了盒子阴影时。 Here's a live demo of what I'm referring to.

现在我的问题是，在不向.main DIV 添加背景的情况下，我能做些什么来防止这种情况发生吗？我尝试过使用阴影滤镜，但它没有像 box-shadow 那样为我提供所需的功能。还是我必须等待在 WebKit 中对此进行修补？

提前致谢！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

在.mainseems to中添加以下规则解决Webkit中的问题transform: translateZ(0);

它实际上不应该做任何事情，只是解决这个错误。

【讨论】：

这很奇怪......也许它与添加该规则导致DIV被GPU加速的事实有关？不管它是什么，它解决了我的问题！谢谢！