7

I've been trying use linear-gradient CSS to avoid using an image for a gradient but unfortunately it renders poorly in Chrome with visible banding.

I've created a codepen example to illustrate the problem.

http://codepen.io/chrism/pen/1

It is strange because it renders perfectly in safari, another webkit based browser.

The CSS code comes from compass images, so don't think it is a problem with my CSS

I found in the Chrome issue tracker this ticket, which I think relates to this issue.

http://code.google.com/p/chromium/issues/detail?id=41756

I was wondering if anyone had any workarounds for this which do not involved using images?

Thanks!

| improve this question | |
  • Nope. There is no workaround. It's Chrome's render engine. Nothing you can do short fo using images or waiting for Google to improves their render engine. – Scott Jul 16 '12 at 1:19
5

The difference you're seeing is dithering. Safari dithers gradients, Chrome does not. I don't believe there's a way to enable or disable dithering for either.

Dither is an intentionally applied form of noise used to randomize quantization error, preventing large-scale patterns such as color banding in images.

http://en.wikipedia.org/wiki/Dither

Unfortunately, this means you may have to use images. If you do decide to use a repeating image for a gradient, make sure you leave enough width or height for the dithering to work. Usually dithering needs around 10-20 pixels to not look repeated.

| improve this answer | |
  • Hi Marc, thanks for the answer. Yes, I understand that the smoother gradient is due to the dithering, I was just hoping perhaps someone might know of a way to 'force' chrome to dither gradients somehow with either CSS or javascript. I will use an image instead, but was hoping (for various reasons) not too. Thanks again for your advice and I enjoy your iterate podcast! – Chris Jul 16 '12 at 9:46
  • Yeah, it'd be great if -webkit-gradient-dither: on; existed. And thanks :D – Marc Edwards Jul 16 '12 at 11:12
  • Not the same, and probably far poorer performance, but what about a subtle noise texture over the top of a CSS drawn gradient? One smallish noise texture could probably be used for all your gradients. Not identical to dithered gradients, but it might be better than no dithering? – Marc Edwards Jul 16 '12 at 11:22
  • 2
    It is funny you say that because it was the first thing I tried - adding a transparent noise background image over the top... although it definitely helped it is sadly not enough to obfuscate the banding sufficiently even with quite heavy noise (too much for the effect I want anyway). I would have liked to have posted images to illustrate this, but I need a couple more points before I'm allowed to. Thanks again for your suggestion, it makes me happy that I have considered every avenue before resorting to an image :) – Chris Jul 16 '12 at 12:14
  • Ah ok. Well, it's great you tried it. I've voted the question up, so hopefully that gives you some more points towards being able to post images. – Marc Edwards Jul 17 '12 at 12:41
0

I notice if you render the element containing your gradient with the GPU using transform:translateZ(0), it render smoother, not perfect, but smoother.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.