Bug di confine e overflow di Webkit quando si utilizza qualsiasi animazione/transizione

Question

Ho riscontrato un bug strano quando utilizzo una combinazione di overflow, border-radius e transition. Ho un div con un img al suo interno. Il div ha un raggio di confine e un overflow impostato su nascosto. Quando passo il mouse sopra l'img, ho una transizione che rende l'immagine più grande per creare un effetto zoom. Il problema è che l'overflow sembra rompersi in basso a sinistra e in basso a destra dell'immagine.

Ho creato un jsfiddle per farvi vedere di cosa sto parlando. http://jsfiddle.net/dmcgrew/HuMrC/1/

Funziona bene in Firefox ma si interrompe in Chrome e Safari.

Qualcuno sa che cosa potrebbe causare questo o come risolverlo?

Answer 1

Non so se sto capendo correttamente il problema poiché l'immagine non si sta caricando. Se aggiungi height: 100%; a .inner_block, può esserti d'aiuto?

http://jsfiddle.net/HuMrC/2/

Answer 2

La risposta accettata non ha funzionato per me, perché io non posso avere il confine chiaro aumentando l'area cliccabile dell'elemento mascherato, né voglio a oscurare quella di altri elementi (e l'impostazione l'altezza al 100% non ha risolto il problema).

Vedere my answer to a related question per una possibile soluzione.

Answer 3

Ho avuto lo stesso esatto problema. Aggiungendo questo al contenitore padre lo ha risolto per me (questo è un mix MINORE).

.transitionfix() { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0) 
} 

Answer 4

ho aggiunto meno il valore z-index per l'immagine e il valore più alto per il genitore

li {z-index:10; overflow: hidden;} 

li img {z-index: -10;}