CSS3 gradient rendering issues from transparent to white

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.

The file I am using to test with is: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

CSS used is:

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%);

Rending looks like what I want in Safari 6 (mac):

Chrome rendering fades to gray colour before it fades to white (Firefox renders this way also on mac os):

Any ideas or suggestions on why this odd rendering might be?

I've encountered this as well. I'm not sure why it happens, but here's what I've used in my own projects as a workaround:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

Instead of giving Chrome a "transparent" value, give it something very, very close to transparent. Hope this helps!

Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).

The CSS I pasted in here was wrong, I was editing the wrong file DOH!

Original CSS not working

background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);

CSS that fixed the problem

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);

Problem being transparent isn't a colour, it is black with 0 alpha, setting to specifically white with 0 alpha fixes the issue. (thanks @carisenda)

This still points on inconsistencies with how browser vendors are dealing with alpha transparency in CSS3 gradients.

The trick with a color besides white (and with white actually) is to rgba the actual color that is fading.

background-image: linear-gradient(to right, 
  rgba(111,174,249, 0) 0%,
  rgba(111,174,249, 0) 80%,
  rgb (111,174,249)    100%);

In case the color being used is hex (like #6faef9) use a hex to rgba converter to convert the color.

The same problem is encountered on native IOS as well:

1. https://stackoverflow.com/questions/24882361/ios-white-to-transparent-gradient
2. https://betterprogramming.pub/the-proper-way-of-creating-a-transparent-gradient-layer-in-ios-b082daa866b1layer-is-gray

I notice that on CSS the solution is to use white color instead of black and then add 0 transparency

rgb(255 255 255/0)

I've recently encountered the same issue regarding transparency on safari. What worked for me was substituting the css into the compiled safari css.

This didn't work for me

 background-image: linear-gradient(to top, rgba(56,56,56,1) 5%, rgba(255,255,255,0.001) 100%)

This did work for me

background-image: linear-gradient(0deg,#383838 5%, hsla(0, 0%, 20%, 0) 100%)