带模糊过滤器的模糊阴影会导致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，有什么我可以做，以防止这种情况发生？我试过使用阴影过滤器，但它不会给我像箱阴影一样需要的功能。或者我需要等待WebKit中的补丁？

在此先感谢！

Answer 1

添加在Webkit的transform: translateZ(0);

以下规则来.mainseems to解决问题不应该实际上做任何事情，但解决方法的错误。