Quote:
Originally Posted by coothead
here is an example that works in Firefox, Safari, Chrome and partially in Opera...
Code:
[...]
background:radial-gradient( circle, #0ff 0%, rgba(0, 0, 255, 0) 100%, #00f 95%);
|
Chrome and Firefox appear to be the bugged browsers here.
If you substitute the keyword
transparent for
rgba(0, 0, 255, 0) (both of those values refer to the same color), the resulting radial gradient changes in Firefox 17 and Chrome 23 to include a gray hue, indicating that those two browsers have rendering issues:
rgba(0, 0, 255, 0) is not be treated as the equivalent of
transparent, and transparency in general is broken.
In Internet Explorer 10 RP1 and Opera 12.1, the rendering is the same using either value and both browsers render the gradient identically.
Basically, the Chrome/Firefox gradient has to be scrapped or recreated using different color stops to be cross-browser-compatible.
On another note, the color stop
#00f 95% (
blue 95%) doesn't appear to do anything. The
latest draft of the spec, unfortunately, doesn't appear say what to do with color stops that are specified after the final color stop at 100%. All four browsers seem to silently ignore the last stop in this code. I noticed that an almost identical useless stop appears in
Mozilla's (outdated) documentation on radial gradients, so maybe that's where this stop came from.