Нечетная коробка в хром

Я пытаюсь разместить анимированный gif поверх jpg, и, похоже, он работает в большинстве браузеров (IE, Firefox, iPhone, iPad), но есть странная коробка вокруг анимированного gif в хром на windows, firefox для mac и хром для mac.

Я, наконец, решил его с помощью нескольких нечетных хаков, например, чтобы изменить размер изображения до 99,9%, используя маску, чтобы разрешить показ части анимированного gif, но есть ли лучшее/более чистое решение для кросс-браузера?

В основном я начал с div и изображения внутри, оба из которых реагируют.
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;
}

Вот jsfiddle: http://jsfiddle.net/GyDCx/7/

Ответ 1

Это проблема масштабирования края изображения, решение, которое я использую в таких случаях:

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

Это отключает размытие края при масштабировании изображений. http://jsfiddle.net/GyDCx/31/

Ответ 2

Вы можете попробовать:

-webkit-transform: translateZ( 0px );

Это исправит его в Chrome.

см. http://jsfiddle.net/PvnmK/7/

PS1: также тестируется на сафари и firefox.