-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

Have you tried setting background-size: auto, 250px 250px; — auto for first image and 250px for your gradient.

When you don't need a gradient image so big that it would cover whole page it's best to limit it's size. Besides rendering problems with big images, I think that it's better for the browser's performance.

So, you example would look like http://jsfiddle.net/kizu/phPSb/ (blindcoded, couldn't reproduce the problem though).