Das Kombinieren von Größe und Übersetzen von Übergängen führt zu Stottern in Safari

Question

Wenn Sie Übergänge zu einem Element hinzufügen und die Breite und/oder Höhe ändern und -webkit-transform: translate3d stottert die Übergangsanimation. Es scheint, zuerst die Breiten-/Höhenänderung zu animieren, es teilweise zu übersetzen und dann auf die endgültige übersetzte Position zu springen. Bei der Rückkehr zum ursprünglichen Stil ist die Animation jedoch glatt. Ich sehe das nur in Safari (Version 8.0.6 getestet). Hier einige Beispiele 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; } 

Und ein jsfiddle http://jsfiddle.net/84w4hj99/4/

ich jquery bin mit einer Klasse auf das Element auf einem Knopf klicken zum Zweck der Demonstration hinzuzufügen, aber es zuerst bemerkt, bei der Verwendung von: schweben zu bekomme den gleichen Effekt. Fehle ich hier etwas oder ist es nur ein Problem mit Safari, und kennt jemand einen Workaround? Vielen Dank.

Answer 1

Verwenden Sie transform: scale() anstatt die Breite und Höhe zu ändern. Sie werden in diesem Fall einen reibungslosen Übergang haben. Sie müssen jedoch die Eigenschaften top & right oder transform: translate3D() anpassen, um Ihr Objekt wieder an die richtige Position zu bringen. Sollte einfach sein.

Siehe http://jsfiddle.net/y3xqak1z/