Boîte bizarre en chrome

Question

J'essaie de placer une animation gif sur un jpg et cela semble fonctionner dans la plupart des navigateurs (IE, Firefox, iPhone, iPad), mais il y a une étrange boîte autour de l'image animée. gif en chrome sur Windows , firefox pour le mac y chrome pour le mac .

J'ai finalement résolu le problème grâce à quelques bidouillages bizarres, comme forcer l'image à être redimensionnée à 99,9 %, utiliser un masque pour ne laisser apparaître qu'une partie du gif animé, mais existe-t-il une solution plus efficace et plus propre pour tous les navigateurs ?

J'ai commencé avec un div et une image à l'intérieur, qui sont tous deux réactifs.
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;
}

Voici un jsfiddle : http://jsfiddle.net/GyDCx/7/

Answer 1

C'est un problème de mise à l'échelle des bords de l'image, la solution que j'utilise dans de tels cas est la suivante :

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

Cela désactive le bord flou lors de la mise à l'échelle des images. http://jsfiddle.net/GyDCx/31/

Answer 2

Vous pouvez essayer :

-webkit-transform: translateZ( 0px );

Cela corrigera le problème dans Chrome.

voir : http://jsfiddle.net/PvnmK/7/

PS1 : également testé sur safari et firefox.