Chrome gradiente lineare bug

Question

ho una sfumatura lineare ripetendo in questo modo:

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

Tuttavia, in Chrome, Firefox su Mac e opera l'aspetto è distorta:

Funziona bene quando in una piazza, ma quando diventa un rettangolo diventa frastagliato - lo stesso non si verifica in tutti gli altri browser.

Quali sono le cause?

jsfiddle

Answer 1

Forse si vuole:

.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

Un approccio è quello di diffondere la sfumatura un po 'di più. Aggiungendo una transizione gradiente del 2% su entrambi i lati della striscia si ottiene una leggera sfocatura che oscura i bordi senza eliminare il bordo.

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

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

Per aumentare la sfocatura lungo il bordo della banda, aumentare il 2% al 3% o più e quindi diminuire il 7% al 6% o più per mantenere le strisce della stessa dimensione:

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

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