title: transform: translateY(-50%) causes 1px jump/shift in IE and EDGE
body: <p>Please see an example in jsfiddle. <a href="https://jsfiddle.net/0uwmxt02/1/" rel="nofollow noreferrer">https://jsfiddle.net/0uwmxt02/1/</a></p>
  
  <p>In IE and EDGE the transform: translateY(-50%) causes 1px jump up and down at the start and end of the animation. In Chrome the displacement still occurs but it is smooth. Any idea of what causes it?</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>.submenu-arrow-hover {
    position: relative;
    width: 200px;
    top:50px;
   }
    
   .submenu-arrow-hover:after {
      //background: rgba(155, 173, 188, 0.9);
      position:absolute;
      content:'';
      width: 1px;
      height: 28px;
      border: 1px solid red;
      border-right:0;
      border-top:0;
      top:50%;
      right:-1px;
      transform-origin: 0 0;
      transform: translateY(-50%);
      transition-duration: .3s;
    }
    
  .submenu-arrow-hover:hover::after {
        //background: rgba(155, 173, 188, 0.9);
        position:absolute;
        content:'';
        width: 20px;
        height:20px;
        border: 1px solid red;
        border-right:0;
        border-top:0;
        top:50%;
        right:-1px;
        transform-origin: 0 0;
        transform: translateY(-50%) rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="submenu-arrow-hover"&gt;HOVER ME&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>