Menu
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?
751
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
Because <gradient> s belong to the <image> data type, they can only be used where <image> s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.
Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient.
In CSS, you can't transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element.
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).
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
