Chrome线性渐变错误

Question

我有一个重复的线性渐变，如下所示：

.placeholder { 
background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}

然而，在Chrome，Mac上的Firefox和歌剧中，外观是偏斜的：

在正方形中它工作正常，但当它变成矩形时会变得锯齿状 - 在所有其他浏览器中都不会出现这种情况。

是什么原因引起的？

jsfiddle

Answer 1

也许你想要：

.placeholder { 
background: repeating-linear-gradient(45deg, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent;
border: 1px solid #000000;
float: left;
height: 110px;
width: 120px;
}

Answer 2

一种方法是将渐变扩展一点。在条纹的任一侧添加2％的渐变过渡会产生轻微的模糊，在不消除边缘的情况下遮盖锯齿。

repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 2%, #7722AA 7%, #CC44EE 9%, #CC44EE 14%) transparent

http://jsfiddle.net/mblase75/FrT6Y/

要增加条纹边缘的模糊，请将2％增加到3％或更多，然后将7％减少到6％或更多，以使条纹保持相同的大小：

repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 3%, #7722AA 6%, #CC44EE 9%, #CC44EE 14%) transparent

http://jsfiddle.net/mblase75/FrT6Y/5/