Ошибка линейного градиента Chrome

У меня есть повторяющийся линейный градиент вот так: 

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

однако в chrome, firefox на Mac и opera внешний вид искажен:enter image description here

он отлично работает, когда в квадрате, но когда он становится прямоугольником, он становится неровным - то же самое не происходит во всех других браузерах.

чем это вызвано?

jsfiddle

6
css3 google-chrome gradient

2 ответов

может быть, вы хотите:

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

?

2

один подход заключается в том, чтобы немного расширить свой градиент. Добавление градиентного перехода 2% к любой стороне полосы дает небольшое размытие, которое затемняет jaggies без устранения края. 

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

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

чтобы увеличить размытие вдоль края полосы, увеличьте 2% до 3% или более, а затем уменьшите 7% до 6% или более, чтобы сохранить полосы одинаковыми размер:

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

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

1