重複-y背景的Webkit錯誤

Question

我有一個有序的列表，我試圖讓它的背景斑馬條紋。我爲背景使用重複的線性漸變，但我一直在Chrome中遇到一個非常奇怪的錯誤。列表太長了，條紋會變得模糊;只有少於50個物品時纔可用，但在此之後變得太模糊不清。當有不到10件商品時，它非常脆。

HTML：

<ul class="test"> 
    <li class="subtest">foo</li> 
    <li class="subtest">bar</li> 
    <li class="subtest">baz</li> 
    <li class="subtest">foo</li> 
    <li class="subtest">bar</li> 
    <li class="subtest">baz</li> 
    etc... 
</ul> 

CSS：

.test{ 

     background-image: repeating-linear-gradient(
       180deg, 
       #ffffff 0px, 
       #ffffff 50px, 
       #f5f5f5 50px, 
       #f5f5f5 100px); 
} 
.subtest{ 
    height:50px; 
} 

的jsfiddle例如：http://jsfiddle.net/yLLF2/

從列表中刪除一些元素，看看它是如何應該看看。

我原本通過直接使用類型（2n）設計元素來工作，但用戶可以動態地隱藏/顯示元素，這會中斷該實現。

該錯誤只出現在chrome中。有沒有什麼辦法解決這一問題？谷歌搜索讓我無處可去。

Answer 1

您不說明背景的大小。應該是：

.test { 
    background-image: repeating-linear-gradient(
      180deg, 
      #ffffff 0px, 
      #ffffff 50px, 
      #f5f5f5 50px, 
      #f5f5f5 100px); 
    background-size: 100% 100px; 
}