title: Swipe.js: How does it allow page-scrolling while executing javascript?
body: <p>I always thought that the mobile Safari browser on iOS essentially suspended all javascript execution whenever the page element is engaged in dynamic "native" scroll. </p>
  
  <p>However I noticed that this is apparently not true. I noticed this first while browsing a product page on <code>opticsplanet.com</code>, and then eventually I was able to reproduce similar behavior on the swipe.js homepage's demo. These pages are ordinary vertically scrolling pages but the image gallery lets you smoothly swipe side to side, and the pictures are scaled and will snap.</p>
  
  <p>The thing that was surprising to me was that it's quite possible to engage the regular page scroll while still having the image swiper widget track the horizontal position of the touch. </p>
  
  <p>This just simply wouldn't be possible if JS execution is suspended, so either there is an exception to this rule (if indeed it is a rule that JS execution is suspended during scroll) or there is some other amazing hack that's being used, because the horizontal scrolling has custom snapping behavior. As the page continues to vertically scroll, the widget is simultaneously animating the snap-back of the photo. There is simply no way to get this type of friendly UX with something like a horizontally-scrolling wide overflow-scrolling div.</p>
  
  <p>It really has to be some script that's running because I inspected the website and it's apparently setting a <code>webkit-transform</code> style. </p>
  
  <p>I noticed this on a device still runing iOS 6.1, by the way, so it isn't some new thing with iOS7. </p>
  
  <p>So the question is, what's the piece of the puzzle that I'm missing here? Sadly the Safari inspector is missing the <code>break on attribute change</code> silver bullet found in Chrome.</p>
  
  <p>Why do my webkit animations hang/freeze whenever native scroll is engaged? </p>
  
  <p>I can think of one more explanation at the moment (and this one is promising) and that is <code>requestAnimationFrame</code>. Whereas I have only really heavily experimented with CSS animations (which hang), and I'm pretty certain the old-style <code>setTimeout()</code> loops will also hang. But I would be delighted if <code>rAF</code> callbacks do get executed. However, I don't really see how they can track touches (not being a touch event handler).</p>