-webkit-linear-gradient causes banding in Chrome/Safari

Question

The title prettymuch says it all. The first picture below is a screenshot when the whole page is about 8000 pixels tall, taken in the latest version of Chrome:

Answer 1

Your demo link does not work but i did some tests and it worked fine for me using Chrome when you add width/height of 100% to the body/html elements, like so:

body, html {
    width:100%;
    height:100%;
}

Demo

You can try that or you can just declare a header/logo piece where you can add the starting gradient and just add the ending gradient to the body of your css so it blends in correctly, like so:

CSS

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

body {
    background-color: #f3ffff;
    margin:0px;
    height:10000px;
}

.header {
    height:300px;
    width:100%;
    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    -webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0));

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'),
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px
    );

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px);
    background-position: center top, center top;
    background-repeat: no-repeat, repeat-x;
    background-size:auto;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')";
}

HTML

    content

Demo

Friendly note: For anybody looking for the issue you can see it happening here in Chrome: http://jsfiddle.net/skJGG/