title: css transform stutters in chrome
body: <p>Using transform on two elements works fine in IE and Firefox but somehow "stutters" in Chrome.</p>
  
  <p>I've captured the different behaviours with some gifs:</p>
  
  <ul>
  <li><a href="http://i.imgur.com/gK7Gl91.gif" rel="nofollow">Firefox</a></li>
  <li><a href="http://i.imgur.com/8qHsgiC.gif" rel="nofollow">IE</a></li>
  <li><a href="http://i.imgur.com/ckeWTEx.gif" rel="nofollow">Chrome (notice how the right border "jumps" around")</a></li>
  </ul>
  
  <h2><a href="https://jsfiddle.net/8tL2sfeb/" rel="nofollow">Example on jsfiddle</a></h2>
  
  <p>Is it possible to fix this behaviour in Chrome? I couldn't find anything when I searched.</p>
  
  <p>Thanks for your help in advance :)</p>
  
  <hr>
  
  <p>Here is some exemplary code.<br>
  HTML:</p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="menu"&gt;
          asdf
      &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;button id="trigger"&gt;toggle menu&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.outer &gt; div {
      transition: transform 500ms ease, margin-right 500ms ease;
  }
  
  .menu {
      background-color: #1d1f20;
      top: 0;
      left: -200px;
      width: 200px;
      position: fixed;
      transform: translate(200px,0);
  }
  
  .content {
      transform: translate(200px, 0px);
      margin-right: 200px;
      background: green;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var current = '200px';
  
  $('#trigger').on('click', function() {
      current = current === '200px' ? '0' : '200px';
      $('.menu').css({transform: 'translate('+current+', 0)'});
      $('.content').css({transform: 'translate('+current+', 0)', marginRight: current === '200px' ? '200px' : '0'});
  });
  </code></pre>