title: Cursor in wrong position in IE11 after CSS transform w/ transition
body: <p><a href="http://jsfiddle.net/wmil/3arLjemp/" rel="nofollow">jsfiddle here</a></p>
  
  <p>This is a bug specific to IE and I'm looking for a work around.</p>
  
  <p>When I apply a CSS <code>transform: translate</code> to a text input, that has the focus, with <code>transition</code> set to something valid, the cursor stays in the old location while the element moves.</p>
  
  <p>Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.</p>
  
  <p>This code illustrates the problem... again, it's an IE specific bug.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var toggleTop = function(){
      $('.input-container').toggleClass('top');
      $('#the-input').focus();
  }
  
  $('#the-button').click(toggleTop);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.input-container {
      top: 100px;
      left: 100px;
      position: fixed;
      transition: all 1s;
  }
  
  .input-container.top {
      transform: translateY(-100px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class='input-container'&gt;
      &lt;input type='text' id='the-input'&gt;&lt;/input&gt;
  &lt;/div&gt;
  &lt;button id='the-button'&gt;Click Me!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>