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
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With