title: CSS3 gradient rendering issues from transparent to white
body: <p>I am having issues with cross browser rendering of CSS3 gradients. This is happening when I am trying to create a gradient from transparent colour to white.</p>
  
  <p>The file I am using to test with is:
  <a href="http://f.cl.ly/items/0E2C062x3O161b09261i/test.html" rel="noreferrer">http://f.cl.ly/items/0E2C062x3O161b09261i/test.html</a></p>
  
  <p>CSS used is:</p>
  
  <pre><code>background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  </code></pre>
  
  <p>Rending looks like what I want in Safari 6 (mac): 
  <img src="https://i.stack.imgur.com/c3het.png" alt="Safari 6 Mac OS 10.8"></p>
  
  <p>Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os):
  <img src="https://i.stack.imgur.com/dSTdi.png" alt="Chrome 21 Mac OS 10.8"></p>
  
  <p>Any ideas or suggestions on why this odd rendering might be?</p>