Chrome linearen Gradienten Bug

Question

Ich habe ein sich wiederholendes linearen Gradienten wie folgt:

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

jedoch in Chrome, Firefox auf Mac und Oper ist das Aussehen verzerrt:

Es funktioniert gut, wenn in einem Quadrat, Aber wenn es zu einem Rechteck wird, wird es zackig - dasselbe passiert nicht in allen anderen Browsern.

Was verursacht das?

jsfiddle

Answer 1

Vielleicht möchten Sie:

.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

Ein Ansatz ist der Gradient ein bisschen mehr, um sich auszubreiten. Das Hinzufügen eines Übergangs von 2% zu jeder Seite des Streifens ergibt eine leichte Unschärfe, die die Schattierungen verdeckt, ohne die Kante zu beseitigen.

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

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

die Unschärfe entlang der Streifenkante zu erhöhen, erhöht das 2% bis 3% oder mehr und dann das 7% bis 6% oder mehr verringern, die Streifen mit der gleichen Größe zu halten:

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

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