CSS gradient with rings or banding in Safari

Question

I've been reading about this problem some but I'm not an expert with CSS so thought I'd ask. I'm using this code over a dark background image with noise and it looks great in Firefox but in Safari it has rings:

#welcome {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    background-image: -webkit-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -moz-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -linear-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -ms-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
    background-image: -o-radial-gradient(circle, rgba(100,100,100,0.2), rgba(0,0,0,0.9));
}
#welcome::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    background-image: -webkit-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -moz-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -linear-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -o-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
    background-image: -ms-radial-gradient(circle, rgba(255,255,255,0.1), rgba(255,255,255,0));
}

Here you can see the results first the good and second the bad:

http://cl.ly/1k1K2M1x3Y0G

http://cl.ly/3P1L0c1B3Z1t

Can someone suggest to me what can be done about this? Or if there is another way to recreate this effect without the rings? Thank you very much,

rc

Answer 1

I'm not entirely sure what is wrong with your CSS, but I would suggest using this resource for generating CSS gradients. It has the ability to create radial gradients as well, and doesn't seem to produce rings in Safari (at least not in the preview).

http://www.colorzilla.com/gradient-editor/