Chrome linear gradient error

Question

I have a repeating linear gradient like:

.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; } 

However, in chrome, firefox on Mac and in opera, the appearance is skewed:

It works great when squared, but when it becomes a rectangle, it becomes jagged - the same does not happen in all other browsers.

What causes this?

jsfiddle

Answer 1

Perhaps you want to:

 .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

One approach is to expand your gradient a bit more. Adding a 2% gradient on both sides of the strip gives a little blur that obscures the teeth without removing the edges.

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

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

To increase blur along the edge of the strip, increase 2% to 3% or more, and then reduce 7% to 6% or more so that the strips are the same size:

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

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