Odd pudełko w chromie

Question

próbuję umieścić animowane gif nad jpg, i wydaje się działać w większości przeglądarek (IE, Firefox, iPhone, iPad), ale nie jest dziwne pole wokół animowanego gif w chrome on windows, firefox dla mac i chrome dla mac.

W końcu udało mi się rozwiązać problem za pomocą kilku dziwnych hacków, takich jak wymuszenie zmiany rozmiaru obrazu do 99,9%, używając maski, aby umożliwić wyświetlanie tylko części animowanego gifu, ale czy istnieje lepsze/czystsze rozwiązanie dla przeglądarki krzyżowej ?

Zasadniczo zacząłem od div i obrazu w środku, z których oba są responsywne.
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; 
} 

Oto jsfiddle: http://jsfiddle.net/GyDCx/7/

Answer 1

Jest to problem skalowania krawędź obrazu, rozwiązanie używam w takich przypadkach jest:

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

To wyłącza rozmyte krawędzie podczas skalowania obrazów. http://jsfiddle.net/GyDCx/31/

Answer 2

Można spróbować:

-webkit-transform: translateZ(0px); 

Będzie to naprawić w Chrome.

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

PS1: również przetestowane na Safari i Firefox.