title: CSS gradient with rings or banding in Safari
body: <p>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:</p>
  
  <pre><code>#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));
  }
  </code></pre>
  
  <p>Here you can see the results first the good and second the bad:</p>
  
  <p><a href="http://cl.ly/1k1K2M1x3Y0G" rel="nofollow">http://cl.ly/1k1K2M1x3Y0G</a></p>
  
  <p><a href="http://cl.ly/3P1L0c1B3Z1t" rel="nofollow">http://cl.ly/3P1L0c1B3Z1t</a></p>
  
  <p>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,</p>
  
  <p>rc</p>