title: HTML5 video causes chrome to stutter CSS transitions
body: <p>I've got a page that is playing an HTML5 video in a loop. As you scroll down the page, jQuery adds a class to the nav element. CSS then applies a transition to the left property of th. In Firefox it's working well enough, but Chrome stutters the animation and fails to complete it unless you continue scrolling. </p>
  
  <p>I'm aware there are lots of performance issues with Chrome and HTML5 video.
  <a href="https://stackoverflow.com/questions/6395213/html5-video-causes-weird-glitch-in-css-hover-transition-doesnt-work-well-cros">Like this</a> But I haven't found a great solution.</p>
  
  <p>Removing the background video causes smooth animations in Chrome. But, it's not a terribly heavy video (360p, ~1MB) I'm wondering if there is some better way to apply the class or perform the animation than I'm doing that might help Chrome with it's performance.</p>
  
  <p>Here is a link to the in-progress site (It's mostly un-styled, so please don't hate :)</p>
  
  <p><a href="http://clients.capslock.io/capslock.io/converted-html/" rel="nofollow noreferrer">My Project</a></p>
  
  <p>My HTML</p>
  
  <pre><code>&lt;!-- Left Bar Menu --&gt;
  &lt;div class="leftbar scrollHandle"&gt;
  &lt;/div&gt;
  
  &lt;!-- Contains Header Video on Loop --&gt;
  &lt;div class="videocontainer"&gt;
  &lt;video class="videobackground" poster="{{ "assets/video/poster.jpg" | asset_url }}" autoplay="true" loop="true"&gt;
      &lt;source type="video/mp4" src="{{ "assets/video/360.mp4" }}" /&gt;
      &lt;source type="video/webm" src="{{ "assets/video/360.webm" }}" /&gt;
  &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>var containerPosition = $( ".container" ).offset();
  
  $( window ).scroll(function() {
  if ( $( window ).scrollTop() &gt; containerPosition.top ) {
      $( ".scrollHandle" ).addClass( "show" );
  } else {
      $( ".scrollHandle" ).removeClass( "show" )
  };
  });
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.leftbar {
  position: fixed;
  top: 0;
  left: -$leftbarwidth;
  transition: left 500ms;
  z-index: 2;
  width: $leftbarwidth;
  height: 100%;
  background-color: $grey;
  &amp;.show {
      left: 0;
      transition: left 500ms;
  }
  }
  </code></pre>