title: iOS6 JavaScript touchmove event pass through vertical scroll afterwards jQuery animate does not fire
body: <p>I have a div with a javascript touchmove event listener that scrolls the image inside the div horizontally on iOS6 Mobile Safari.  I'd like allow vertical scrolling of the page to bubble up to the browser but when this occurs, jQuery.animate no longer works.</p>
  
  <p>I've posted a simplified version of the code that demonstrates the problem at
  <a href="https://gist.github.com/4047733" rel="nofollow">https://gist.github.com/4047733</a></p>
  
  <p>The steps I take to recreate the problem are:</p>
  
  <ul>
  <li>Swipe picture left/right and notice how it animates back to the left edge</li>
  <li>Touch the picture and scroll the page up/down</li>
  <li>Repeat left/right swipe and notice the picture does NOT animate back to the left edge. It appears jQuery animate fails after touchmove occurs without e.preventDefault</li>
  </ul>
  
  <p>Here is the javascript inside jQuery document ready from the gist link above</p>
  
  <pre><code>var el = document.getElementById("swipebox"),
      $slider = $('#swipebox').find('img'),
      startX, startY, dx, dy,
      startLeft,
      animateH = false,
      animateV = false;
  
  var onTouchStart = function(e) {
      startLeft = parseInt($slider.css('left'), 10) || 0;
      startX = e.touches[0].pageX;
      startY = e.touches[0].pageY;
  
  };
  var onTouchMove = function(e) {
      dx = e.touches[0].pageX - startX;
      dy = e.touches[0].pageY - startY;
  
      if (
          animateH || 
          (!animateV &amp;&amp; Math.abs(dx) &gt; 5) 
      ) {
          // prevent default, we are scrolling horizontally, 
          animateH = true;
          $slider.stop().css({'left': startLeft+dx*2});
          e.preventDefault();
      } else if (Math.abs(dy) &gt; 5) {
          // do NOT prevent default, we are scrolling the page vertically
          animateV = true;
      } else {
          // direction of scroll is undetermined at this time
          // we've moved less than 5px in any direction
          e.preventDefault();
      }
      return false;
  };
  var onTouchEnd = function(e) {
      $slider.stop().animate({'left': 0}); // animate image back to left
      e.preventDefault();
      animateH = false;
      animateV = false;
  };
  
  var onTouchCancel = function(e) {
      console.log('onTouchCancel');
  };
  
  el.addEventListener('touchstart', onTouchStart, false);
  el.addEventListener('touchmove', onTouchMove, false);
  el.addEventListener('touchend', onTouchEnd, false);
  el.addEventListener("touchcancel", onTouchCancel, false);
  </code></pre>
  
  <p>Any insight would be greatly appreciated.</p>