title: iPad CSS3 webkitTransform and touch events - a slight unexplained stutter
body: <p>This is pertaining to an image gallery, so as you "swipe", images are loaded and unloaded off of the screen, but the center image always appears smoothly.</p>
  
  <p>It is code derived from the swipeview library described here: <a href="http://cubiq.org/swipeview" rel="nofollow">http://cubiq.org/swipeview</a></p>
  
  <p>The problem is that, there is a 100-200ms delay which occurs between when the javascript sets the webkitTransform in the touch end event, and when the element actually starts animating on the screen.</p>
  
  <p>This problematic delay, only happens intermittently; it seems that it starts happening consistently after about 15-20 slides have been unloaded/loaded.</p>
  
  <p>In the touch move event there is code like this:</p>
  
  <pre><code>element.style.webkitTransitionDuration = 0
  element.style.webkitTransform = "translate3d( etc. ) "
  </code></pre>
  
  <p>And this functions very fast, such that if you move your finger around on the ipad, the element follows your finger precisely and "instantly".</p>
  
  <p>And in the touch end event there is code like this:</p>
  
  <pre><code>element.style.webkitTransitionDuration = '&lt;some_number&gt;ms';
  element.style.webkitTransform = "translate3d( etc. ) "
  </code></pre>
  
  <p>And the touch end event is where the problem is.  The touch End event itself fires the instant the finger is removed from the ipad, however, when the problem is happening, the css update doesnt trigger an actual animation on screen until after the problematic delay mentioned above. </p>