Combining size and translate transitions causes stutter in Safari

Question

When adding transitions to an element and altering the width and/or height and -webkit-transform:translate3d, the transition animation stutters. It appears to animate the width/height change first, as well translate it partially, then snaps to the final translated position. When returning to the original style, however, the animation is smooth. I'm only seeing this in Safari (version 8.0.6 tested). Here's some example 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; }

And a jsfiddle http://jsfiddle.net/84w4hj99/4/

I'm using jquery to add a class to the element on a button click for the sake of demonstration, but first noticed it when using :hover to get the same effect. Am I missing something here or is it just a problem with Safari, and does anyone know a workaround? Thanks.

I'm experiencing this same problem. It's like the browser isn't aware of the width/height change until the transition is complete. — jhned, Jul 09 '15 at 13:29

score 0 · Answer 1 · answered May 29 '17 at 07:29

Try using transform: scale() instead of changing the width and height. You will have a smooth transition in this case. However, you will have to adjust the top & right or transform: translate3D() properties to position your object back to the correct position. Should be easy.

See http://jsfiddle.net/y3xqak1z/

Combining size and translate transitions causes stutter in Safari

1 Answers1

Linked