Grayish line appearing around background image of a div - html

Question

I have a single div that's 100% of the width and height of the page.
I've set the background of the div to an animated gif and made the height of the background change with the div's height (which is 100% the height of the page). The background image repeats horizontally and is positioned at the bottom of the page.
HTML / CSS
Run this snippet in Chrome, make it full-screen and then resize the window until the line appears.
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto 65%;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
The problem is that a gray, horizontal thin line appears on top of the background image. The background of the page is the same color as the top of the image, so I don't know where the line is coming from. When I make the browser's (Google Chrome) height very short, the line disappears. This problem doesn't occur on Safari.
As can be seen in the screenshot above, the repeating background image is positioned at the bottom. There is are no vertical liens between every repeated image but there is one horizontal line that goes across all of them. I've checked the image and the line is not there, it is produced by the browser. How do I get rid of this line? I've looked at other posts on this but none of the fixes work.
Here's the background image:

Answer 1

html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-size: auto;
background-position: bottom;
z-index: 1000;
}
<div class="bottomAnim"></div>
Use this
background-size: auto;
instead of
background-size: auto 65%;

Answer 2

#media workaround
This bug only appears to occur with larger viewport heights. Luckily it is not as critical to scale the image down after a certain height. With that in mind we can use #media queries to apply the background-size scaling only when the viewports height is under a certain size:
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
Working Example
As a jsBin as well
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
.bottomAnim {
border: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
background-position: bottom;
z-index: 1000;
}
#media (max-height: 700px) {
.bottomAnim {
background-size: auto 65%;
}
}
<div class="bottomAnim"></div>