Лінійний градієнт css з металевим ефектом не працює для ширшою ширини в Safari - сафарі, лінійні градієнти, css

Я намагаюся використовувати ефект матового металу в сафарі на великій поверхні. http://simurai.com/post/9214147117/css3-brushed-metal

Це, як кажуть, в Safari, градієнти відключеніі є товсті білі і чорні лінії на більшій ширині, що руйнує ефект. Я спробував налаштувати градієнти і після багатьох спроб я був невдалий у позбавленні товстих ліній.

Це виглядає нормально в інших веб-переглядачах (включаючи Chrome). Проблема виникає тільки в Safari, наскільки я знаю.

JS Fiddle для зручності: http://jsfiddle.net/Qzdme/2/

відповідні CSS:

    /* Setting min-width because problem is only noticeable at larger widths */
min-width: 900px;
background-image:   -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
-webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);

UPDATE: Я зміг позбутися товстих чорних ліній, збільшивши легкість другого повторюваного лінійного градієнта: http://jsfiddle.net/Qzdme/3/ Але я все ще бачу густі білі лінії ...

Відповіді:

Перевірте цю скрипку, http://jsfiddle.net/siyakunde/Qzdme/38/

Я це дав background-size

Повторювані градієнти не є розумними при переході між максимальним значенням% hsl і початком нового значення 0%. Можна спробувати поступовий перехід назад до першого набору значень hsl, наприклад:

div {
height: 200px;
min-width: 900px;
background-image:     -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%, hsla(0,0%, 100%,0) 9%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%, hsla(0,0%,  0%,0) 6%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%, hsla(0,0%,100%,0) 4%),
-webkit-linear-gradient(-90deg, hsl(0,0%,78%)  0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);

}

Ось версія jsfiddle: http://jsfiddle.net/Qzdme/35/

Це, здається, виглядає трохи більш гладко, коли масштабується. Удачі!