Chrome linear gradient bug

Question

I have a repeating linear gradient like so:

.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 opera the appearance is skewed:

It works fine when in a square, but when it becomes a rectangle it becomes jagged - the same doesn't occur in all other browsers.

What causes this?

jsfiddle

Answer 1

Maybe you want:

.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 spread out your gradient a bit more. Adding a 2% gradient transition to either side of the stripe gives a slight blur that obscures the jaggies without eliminating the edge.

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

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

To increase the blur along the stripe edge, increase the 2% to 3% or more and then decrease the 7% to 6% or more to keep the stripes 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/