Fmdpa Posted July 3, 2011 Share Posted July 3, 2011 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 More sharing options...
Ingolme Posted July 3, 2011 Share Posted July 3, 2011 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 More sharing options...
Fmdpa Posted July 3, 2011 Author Share Posted July 3, 2011 Thanks, that actually solved it for all the browsers. Still would like to see the bug fixed, though. Link to comment Share on other sites More sharing options...
Ingolme Posted July 4, 2011 Share Posted July 4, 2011 Bug? I don't call that a bug. How is the browser supposed to know what color you want at the other end of the gradient? Link to comment Share on other sites More sharing options...
Fmdpa Posted July 4, 2011 Author Share Posted July 4, 2011 When I tell the gradient to go from white to transparent, I don't want it to go from white to gray to transparent. The same with black to transparent. Link to comment Share on other sites More sharing options...
Ingolme Posted July 4, 2011 Share Posted July 4, 2011 That's probably because the "transparent" keyword refers to rgba(127,127,127,0) Link to comment Share on other sites More sharing options...
Fmdpa Posted July 4, 2011 Author Share Posted July 4, 2011 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 More sharing options...
Ingolme Posted July 4, 2011 Share Posted July 4, 2011 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 More sharing options...
Fmdpa Posted July 4, 2011 Author Share Posted July 4, 2011 It's interesting that they would implement it like that in the standards. At least it is work-aroundable by explicitly defining which color of transparent you want. I found more related info here http://blogs.msdn.com/b/ie/archive/2011/05...-preview-1.aspx#known issues in IE 10 PP1 Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.