title: Animation artifacts with jQuery in Google chrome (red/blue shift)
body: <p>I am attempting to animate a DIV with  transparent background. JS is here -->  <a href="http://pastebin.com/fvK2FV5W" rel="nofollow">http://pastebin.com/fvK2FV5W</a></p>
  
  <p>The animation works fine, but there are artifacts on-screen when animating left and right (up and down are not affected).</p>
  
  <p>SYMPTOMS:</p>
  
  <ul>
  <li><p>When animating to the left, I get RED lines streaking off of the rightmost white pixels.</p></li>
  <li><p>When animating to the right, I get BLUE lines streaking off the leftmost white pixels. (see <a href="http://i.imgur.com/7Q6rp.png" rel="nofollow">http://i.imgur.com/7Q6rp.png</a>)</p></li>
  <li><p>Only happens when animating right/left, not up/down</p></li>
  <li><p>Chrome (17.0.9), jQuery (1.7.1), Windows 7</p></li>
  </ul>
  
  <p>I've never seen this before, and it is only occurring in Chrome (v 17.0.9).</p>
  
  <p>Any thoughts as to what might be causeing this?</p>
  
  <hr>
  
  <p>EDIT // TESTS:</p>
  
  <ul>
  <li><p>When changing the color of the text from white to blue, and white to red - the streaks reflect the color of the text. Make text red...blue lines are black.  Make text blue...red lines are black.</p></li>
  <li><p>Disabled webGL - didn't change anything.</p></li>
  <li><p>The streaks only appear when the animation is moving slower than a certain speed.  When easing the animation out to the right, i get lines that look like <a href="http://i.imgur.com/7Q6rp.png" rel="nofollow">http://i.imgur.com/7Q6rp.png</a></p></li>
  <li><p>Thanks to Beetroot-Beetroot for saying it might be a result of undue complexity in my code. looks like that might be the problem, still testing.</p></li>
  </ul>