html - 具有重复 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/

从列表中删除一些元素以查看其外观。

我最初通过直接使用 :nth-of-type(2n) 对元素设置样式来实现它，但用户可以动态隐藏/显示元素，这打破了该实现。

该错误仅出现在 chrome 中。有没有什么办法解决这一问题？谷歌搜索让我无处可去。

Answer 1

您没有说明背景的大小。应该是:

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