title: Element jumps when using transform and transition property in CSS
body: <p>Code below:</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>p {
    display: inline-block;
    background-color: #f00;
    color: #fff;
    margin: 100px 200px;
    padding: 20px;
    transition: transform 1s;
  }
  
  p:active {
    transform-origin: top left;
    transform: scale(2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Sheeeet&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So things went as expected when I clicked on this element, but when I released the mouse the element jumped to another position as if there was no <code>transform-origin</code> in effect. Can this be fixed?</p>