Jump to content

Bugs with CSS gradients


Fmdpa
 Share

Recommended Posts

I'm having trouble with CSS3 gradients:White => transparent

background: linear-gradient(bottom, white, transparent); background:-o-linear-gradient(bottom, white, transparent);background:-ms-linear-gradient(bottom, white, transparent); background:-moz-linear-gradient(bottom, white, transparent); background:-webkit-linear-gradient(bottom, white, transparent); background:-webkit-gradient(linear, left bottom, left top, from(white), to(rgba(0, 0, 0, 0)));

This gradient, in Safari and Firefox, does not display as I want it to. Instead of going directly from white to transparent, it goes white->gray->transparent. This is not what I want. Black => transparent

background: linear-gradient(top, black, transparent); /* standard CSS3 */background: -o-linear-gradient(top, black, transparent); /* Opera */background: -ms-linear-gradient(top, black, transparent); /* IE 10 */background: -moz-linear-gradient(top, black, transparent); /* Firefox */background: -webkit-linear-gradient(top, black, transparent); /* New Webkit */background: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0))); /* Old Webkit */

This gradient suffers in IE 10 PP2. Instead of going directly from black to transparent, it does black->gray->transparent. Is there a way I can fix these problems now or must I wait until IE's, Firefox's, and Webkit's gradient rendering engine is fixed?

Link to comment
Share on other sites

As for the webkit version, you could probably set the color to rgba(255, 255, 255, 0) so that the semi-transparent pixels next to it tend to white. I don't know about the other browsers, though.Rather than transparent, see if it lets you use transparent white. Because in a gradient, if the transparent color is black then the visible pixels next to it will tend towards black.

Link to comment
Share on other sites

That makes sense, but it seems like the browser engineers would make "transparent" equal to the last color stop in the gradient with an alpha opacity of 0.

Link to comment
Share on other sites

OK, I looked up the specification. The "transparent" keyword officially means transparent black: http://www.w3.org/TR/css3-color/#transparent-defStandard browsers will continue implementing it that way. As a developer it's best if you define the colors of your gradient explicitly.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...