css linear gradient brushed metal effect not working for larger widths in Safari

Question

I'm trying to use a brushed metal effect in safari over a large surface. The idea for this comes from here: http://simurai.com/post/9214147117/css3-brushed-metal

That being said, in Safari, the gradients are off and there are thick white and black lines at larger widths which is ruining the effect. I've tried tweaking the gradients and after many attempts I've been unsuccessful at getting rid of the thick lines.

It looks OK in other browsers (including Chrome). The problem only occurrs in Safari, as far as I know.

JS Fiddle for convenience: http://jsfiddle.net/Qzdme/2/

relevant 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: I was able to get rid of the thick black lines by increasing the lightness of the second repeating linear gradient: http://jsfiddle.net/Qzdme/3/ But I still see thick white lines...

Answer 1

Check this fiddle out, http://jsfiddle.net/siyakunde/Qzdme/38/

I've given it background-size