css - tartamudeo - tartamudez infantil

Combinar tamaño y traducir transiciones causa tartamudeo en Safari

Question

Al agregar transiciones a un elemento y alterar el ancho y / o altura y -webkit-transform: translate3d, la animación de transición tartamudea. Parece animar primero el cambio de ancho / alto, así como traducirlo parcialmente, luego ajusta a la posición final traducida. Sin embargo, cuando regrese al estilo original, la animación es fluida. Solo estoy viendo esto en Safari (se ha probado la versión 8.0.6). Aquí hay algunos ejemplos de 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; }

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

Estoy usando jquery para agregar una clase al elemento en un clic del botón por el bien de la demostración, pero primero lo noté al usar: hover para obtener el mismo efecto. ¿Me estoy perdiendo algo aquí o es solo un problema con Safari, y alguien sabe una solución alternativa? Gracias.

Answer 1

Intente utilizar transform: scale() lugar de cambiar el ancho y el alto. Tendrás una transición suave en este caso. Sin embargo, deberá ajustar las propiedades top y right o transform: translate3D() para colocar su objeto nuevamente en la posición correcta. Debería ser fácil.

Ver http://jsfiddle.net/y3xqak1z/