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

Question

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

以拥有一个父 DIV(在本例中，我们将使用 .wrapper)和一个子 DIV(.main)为例。在 .main DIV 上应用 box-shadow，在 .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 应用了 box-shadow 时，才会发生这种情况。 Here's a live demo of what I'm referring to .

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

提前致谢!

Answer 1

将以下规则添加到 .main seems to解决 Webkit transform: translateZ(0);

中的问题

除了解决该错误外，它实际上不应该做任何事情。