When applying transitions to an element and adjusting the width and/or height along with -webkit-transform:translate3d, there is a noticeable stutter in the transition animation. It seems like the width/height change is animated first, then partially translated, before snapping to the final position. However, when reverting to the original style, the animation is smooth. This issue only occurs in Safari (tested on version 8.0.6). Below is some sample 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; }
Here is a jsfiddle http://jsfiddle.net/84w4hj99/4/
I am using jQuery to add a class to the element upon button click for demonstration purposes, but I initially noticed this problem when using :hover to achieve the same effect. Are there any solutions or workarounds for this issue in Safari? Thank you.