Combinare le transizioni di dimensione e traduzione causa lo stutter in Safari

Question

Quando si aggiungono transizioni a un elemento e si modificano la larghezza e/o l'altezza e -webkit-transform: translate3d, l'animazione di transizione si arresta. Sembra animare prima la modifica larghezza/altezza, quindi tradurla parzialmente, quindi scatta nella posizione finale tradotta. Quando si ritorna allo stile originale, tuttavia, l'animazione è fluida. Lo vedo solo in Safari (versione 8.0.6 testata). Ecco qualche esempio di css

#foo{ 
    width:100%; 
    height:200px; 
    border:1px solid black; 
    position:relative; 
} 

#poop{ 
    width:25px; 
    height:25px; 
    background-color:green; 
    position:absolute; 
    right:50%; 
    top:50%; 
    -webkit-transition: all 1s; 
    transform:translate3d(0,0,0); 
    -webkit-transform:translate3d(0,0,0); 
} 

#foo .blah{ 
    transform:translate3d(-100%,-100%,0); 
    -webkit-transform:translate3d(-100%,-100%,0); 
    width:100px; 
    height:100px; } 

E un jsfiddle http://jsfiddle.net/84w4hj99/4/

sto usando jQuery per aggiungere una classe all'elemento su un clic sul pulsante per il bene della manifestazione, ma prima notato quando si utilizza: hover per ottieni lo stesso effetto Mi manca qualcosa qui o è solo un problema con Safari, e qualcuno sa una soluzione? Grazie.

Answer 1

Provare a utilizzare transform: scale() invece di modificare la larghezza e l'altezza. In questo caso avrai una transizione fluida. Tuttavia, dovrai regolare le proprietà top & right o transform: translate3D() per riportare l'oggetto nella posizione corretta. Dovrebbe essere facile

Vedi http://jsfiddle.net/y3xqak1z/