StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO-webkit-linear-gradient causes banding in Chrome/Safari
text
Body
copied!<p>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:</p> <p><img src="https://i.stack.imgur.com/Ccn83.png" alt="enter image description here"></p> <p>while this picture is for a different page (using the same CSS) which is about 800 pixels tall:</p> <p><img src="https://i.stack.imgur.com/W9gx3.png" alt="enter image description here"></p> <p>and here is the code:</p> <pre><code> body{ background-color: #f3ffff; margin:0px; background-image: url('/media/flourish.png'), -webkit-linear-gradient( top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px ); background-image: url('/media/flourish.png'), -moz-linear-gradient( top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px ); background-image: url('/media/flourish.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; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')"; } </code></pre> <p>The gradient is meant to cut off at 250px from the top of the page. The fact that the degree of banding seems to depend on the total height of the page is very strange: pages of heights in between these two (800px and 8000px) seem to have bands which are smaller than the first example but still noticeable.</p> <p>Interestingly, I was previously using <code>-webkit-gradient('linear'...)</code> instead and that did not have the same problem; I only swapped over to <code>-webkit-linear-gradient</code> so it would fall in line with my <code>-moz</code> and <code>-o</code> gradients.</p> <p>I haven't tried it on Safari, but the code above makes it work perfectly fine in Firefox and kind-of-work in Opera (the colors get messed up, but the gradient is still smooth). Nevermind IE, which i have given up on.</p> <p>Has anyone else seen this before?</p> <p>Update: This happens on my Mac's Chrome/Safari too, but the bands are about 1/3 the size of the bands shown in the top image, for the exact same page. The banding is identical in both OSX Chrome and OSX Safari. </p> <p>1/3 the size is still noticeable, but not quite so jarring. The actual page is at <a href="http://www.techcreation.sg/page/web/Intro%20to%20XTags/" rel="noreferrer">http://www.techcreation.sg/page/web/Intro%20to%20XTags/</a>, if you want to see for yourself in some other browser. The CSS is "inline" css compiled in-browser using less.js.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload