Background-size:100% is slightly less than 100% - html

Question

Please consider the following HTML and CSS :
HTML
<ul class="test1">
<li><div>Lorem ipsum</div></li>
<li><div>dolor sit amet</div></li>
</ul>
<ul class="test2">
<li><div>Lorem ipsum</div>
</li><li><div>dolor sit amet</div></li>
</ul>
CSS
.test1 div {height:100px;}
.test2 div {height:200px;}
li
{
display: inline-block;
width:100px;
transition:background-position 0.2s ease;
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 50%, #F60 50%);
background-size: 100% 200%;
background-position : top left;
}
li:hover{color: #fff;background-position: bottom left;}
cfr jsfiddle
With a background being 200% of the height, and the top 50% of that background being transparent, that would mean that without hovering, all we can see is a transparent background. However, with this configuration I still can see a slight orange (#F60) line at the bottom, that being the bottom color of my "gradient" background.
If I want to fix this, I must specify background-size in pixels, and in that case I need to put background size as being (element size + 1 px)*2 . Could someone explain what causes this ? This is quite a problem as I would like to use this effect on blocks of a non-fixed height so percentage height is mandatory...

Answer 1

So here is a more involved answer that uses CSS animations: DEMO
Basically, I created colored DIV elements that have a 0% height. On hover of the parent li they grow to 100% height. The tricky part was preventing the return (shrink) animation from playing on page load: solved this by applying a white background to the overlaying text and fading it out after the initial page load completes (hideinit animation).
Added some classes and another DIV to the HTML markup:
<ul class="test1">
<li><div class="text">Lorem ipsum</div><div class="orange"></div></li>
<li><div class="text">dolor sit amet</div><div class="orange"></div></li>
</ul>
The updated CSS:
* I left off the webkit vendor prefixed styles for brevity, they are included in the Fiddle
li {
float: left;
list-style: none;
width:100px;
height: 100%;
position: relative;
}
li:hover div.orange{
animation: grow 1s 1 forwards;
}
li div.orange {
position: absolute;
bottom: 0;
background: orange;
height: 0%;
width: 100%;
z-index: -1;
animation: shrink 1s 1 forwards;
}
li div.text {
padding: 5px;
width: 100%;
height: 100%;
animation: hideinit 1s 1 forwards;
}
#keyframes grow {
from {height: 0%;}
to {height: 100%;}
}
#keyframes shrink {
from {height: 100%;}
to {height: 0%;}
}
#keyframes hideinit {
0% {background: white;}
98% {background: white;}
100% {background: none;}
}

Answer 2

I know that other answers already suggested increasing the background-size height to 201%, and that you had issues with items larger than, lets say 300px, but I tried 202% and was able to increase the size of the div up to 900px with no orange line appearing.
So in summary:
li {
display: inline-block;
width:100px;
transition:background-position 0.2s ease;
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 50%, #F60 50%);
background-size: 100% 202%;
background-position : top left;
}
Best of luck!

Answer 3

to remove the line at the bottom you are having add:
li{
background-attachment: fixed;
}
JSFiddle
In response to dreamgt's comment I added some extra time to the animation. From:
transition:background-position 0.2s ease;
To:
transition:background-position 0.5s ease;
New JSFiddle

Answer 4

increase the height by an additional 1%
li {
display: inline-block;
width:100px;
transition:background-position 0.2s ease;
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 50%, #F60 50%);
background-size: 100% 201%; /* <----------- increased height to 201% */
background-position : top left;
}
DEMO