Chrome gradient liniowy bug

Question

mam powtarzać gradient liniowy tak:

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

Jednak w Chrome, Firefox na Mac i opery wygląd jest przekrzywiony:

To działa dobrze, gdy w kwadracie, ale gdy staje się prostokątem, staje się postrzępiony - to samo nie występuje we wszystkich innych przeglądarkach.

Co to powoduje?

jsfiddle

Answer 1

Może chcesz:

.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

Jednym ze sposobów jest rozłożyć gradientu nieco więcej. Dodanie przejścia gradientu o wartości 2% na każdą stronę paska powoduje lekkie rozmycie, które zaciemnia zasłony bez eliminacji krawędzi.

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

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

celu zwiększenia rozmycia wzdłuż krawędzi z paskiem zwiększyć o 2% do 3% lub więcej, a następnie spada do 7% do 6% lub więcej, aby utrzymać pasy tego samego rozmiaru:

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

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