title: Transition translate, width and height at same time in Safari
body: <p>Is there any way to animate <code>transform: translate</code>, <code>height</code> and <code>width</code> at same time in <strong>Safari</strong>? I have a bug. After transition is finished, element will jump a few pixels away. Here is <a href="https://jsfiddle.net/919rfd8z/2/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    background-color: green;
    height: 100px;
    left: 200px;
    position: absolute;
    top: 200px;
    transition: transform 1s, height 1s, width 1s;
    width: 100px;
  }
  
  div:hover {
    height: 150px;
    width: 150px;
    transform: translate(-50%, -50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>