使用模糊过滤器模糊框阴影会导致Webkit浏览器出现奇怪的行

Question

最近，我在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中修补它？

提前致谢！

Answer 1

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

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