Transition both transform and size in Safari (9.1)

问题

I'm trying to get a smooth transition on an element with transform: translate() and some other properties. (Yes, I've read about matching vendor prefixes.)

It works fine in Chrome and FF, but in Safari it doesn't animate the transform smoothly (jumps at the end). It seems to animate the width and padding fully before applying the translation. Note: I do not want to use transform: scale().

(Same as this question, which hasn't been answered in over a year.)

See this stripped-down fiddle: https://jsfiddle.net/aikenst/og2kLf31/

var square = document.getElementById("square"),
  bool = true;
setInterval(function() {
  if (bool) {
    square.className = "transformed";
  } else {
    square.className = "";
  }
  bool = !bool;
}, 3000);

#square {
  position: absolute;
  top: 10px;
  left: 10%;
  width: 100px;
  height: 0;
  padding-top: 80px;
  background: pink;
  -webkit-transform: translate(-50%, 5%);
  transform: translate(-50%, 5%);
  -webkit-transition: -webkit-transform 2s, width 2s, padding 2s;
  transition: transform 2s, width 2s, padding 2s;
}
#square.transformed {
  width: 50px;
  padding-top: 30px;
  -webkit-transform: translate(-50%, 65%);
  transform: translate(-50%, 65%);
}

<div id="square"></div>

来源：https://stackoverflow.com/questions/39399431/transition-both-transform-and-size-in-safari-9-1