帶模糊過濾器的模糊陰影會導致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解決問題不應該實際上做任何事情，但解決方法的錯誤。