Chrome radial css gradient smoothness

问题:

Im using chrome 18.0.1025.162 and am trying to do a radial gradient

-webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.9))

The problem is that the gradient is very pixelated sort of, the transition in color and alpha is in blocks and not smooth. This is different in Safari and Firefox. Safari & Firefox do it very smoothly and well

Is this a bug with chrome? Anyone have the same problem with this. Its such a simple gradient!! Surely something as simple as this can't be a glitch

Check out : http://jsfiddle.net/GyRLe/1/ for a demo of what I mean.

Is there a solution for this? An image would be awful :(

(Ok so to see how bad the smoothness is): This is what I get when im using it: http://i.imgur.com/UYB1d.png (Chrome)
http://i.imgur.com/tzGuq.png (Safari) (Seems a bit edgy but thats because of the png, otherwise its close to perfect smoothness)

Firefox is just as good as Safari its just chrome is doing it badly I need alpha because Im putting an repeat style image in the background

Edit: Chrome 20 (Canary) also had this horrid issue!

Edit2: The reason we use CSS is so we dont have to use images! So I've added this to http://code.google.com/p/chromium/issues/detail?id=123491 & hopefully google gets their act straight because I think chrome is wonderful

回答1:

I know that it have been posted quite a long time ago, but I encountered the same issue (strong banding) with Chrome 24 using :

-webkit-radial-gradient(center, ellipse cover,  #XXXXXX 0%,#YYYYYY 100%);

But I realized that using the code below the banding almost disappeared :

-webkit-gradient(radial, center, 0px, center, 100%, color-stop(0%,#XXXXXX), color-stop(100%,#YYYYYY));

Hope this helps.

Edit: I've seen that -webkit-gradient(radial, ...) is just the old syntax for radial gradient display, so it should not be a long term answer for that issue...

回答2:

If you don't need the alpha value, it looks a lot smoother using rgb instead of rgba.

Demo: http://jsfiddle.net/tKtV9/

回答3:

It doesn't help much in this case, but I have noticed that adding

width: x-value;
height: y-value;

sometimes can help. X-value and Y-value, of course, being your dimensions.