CSS3 PIE Forums
http://css3pie.com/forum/

Short gradient color stops on tall boxes in IE8
http://css3pie.com/forum/viewtopic.php?f=3&t=1793
Page 1 of 1

Author:  Slippery42 [ Wed Sep 19, 2012 1:39 pm ]
Post subject:  Short gradient color stops on tall boxes in IE8

I need a very short gradient on a fairly tall div, but it seems like IE8 is locked to some percentage of height when finding the stop point on a gradient. Said stop point is probably closer to 20px than the 8px that I need. I'm only doing local development right now, so I have no link to provide, but here's the meat of a quick and dirty page I made to troubleshoot this that should demonstrate the problem:

Code:
HTML
<div class="gradientTesta">Hello World</div>

CSS
.gradientTesta {
height: 500px;
behavior: url(js/PIE.htc);
-pie-background: linear-gradient(top, #dddddd 0, #ffffff 8px);
background-image: linear-gradient(top, #dddddd 0, #ffffff 8px);
background-image: -o-linear-gradient(top, #dddddd 0, #ffffff 8px);
background-image: -moz-linear-gradient(top, #dddddd 0, #ffffff 8px);
background-image: -webkit-linear-gradient(top, #dddddd 0, #ffffff 8px);
background-image: -ms-linear-gradient(#dddddd, 0, #ffffff, 8px);
background-image: -webkit-gradient(
   linear,
   left top,
   left bottom,
   color-stop(0, #dddddd),
   color-stop(0.08, #ffffff)
);


I found that when I change the height, the gradient changes its stop point, so it's not really a noticeable problem on elements with a height of, say, 200px or less. I also notice that the gradient seems to be applied in chunks. Changing the 8px to 5% then 6% then 7% shows this off. Am I using incorrect gradient syntax here, or is this just a limitation I'll have to live with/work around?

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/