Odd box in chrome

Question

I'm trying to place an animated gif over a jpg, and it seems to work in most browsers (IE, Firefox, iPhone, iPad), but there is a strange box around the animated gif in chrome on windows, firefox for the mac, and chrome for the mac.

I finally solved it through a few odd hacks, like forcing the image to resize to 99.9%, using a mask to only allow a portion of the animated gif to show through, but is there a better/cleaner cross browser solution?

I basically started with a div and an image inside, both of which are responsive.
HTML:

<div>
    <img src="http://www.enjoyillinois.com/images/animations/Garden_of_Gods_anim_full.gif" />
</div>

CSS:

div {
    background-image: url("http://www.enjoyillinois.com/images/animations/Garden_of_Gods_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

img {
    width:100%;
    display:block;
}

Here is a jsfiddle: http://jsfiddle.net/GyDCx/7/

Answer 1

It's a image edge scaling problem, the solution I use in such cases is:

img{ image-rendering:-webkit-optimize-contrast; }

That disables the blurry edge when scaling images. http://jsfiddle.net/GyDCx/31/