scatola Odd in cromo

Question

Sto cercando di effettuare un animato gif nel corso di un jpg, e sembra funzionare nella maggior parte dei browser (IE, Firefox, iPhone, iPad), ma c'è una strana scatola intorno al animato gif in chrome on windows, firefox per il mac e chrome per il mac.

Ho finalmente risolto il problema con alcuni hack, come forzare l'immagine a ridimensionare al 99,9%, utilizzando una maschera per consentire solo una parte della gif animata da mostrare, ma c'è una soluzione cross browser migliore/più pulita ?

Fondamentalmente ho iniziato con un div e un'immagine all'interno, entrambi i quali sono reattivi.
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; 
} 

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

Answer 1

E 'un problema di scala bordo dell'immagine, la soluzione che uso in questi casi è:

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

che disabilita il bordo sfocata durante il ridimensionamento delle immagini. http://jsfiddle.net/GyDCx/31/

Answer 2

Si può provare:

-webkit-transform: translateZ(0px); 

Questo lo risolverà in Chrome.

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

PS1: testato anche su Safari e Firefox.