title: Mobile Safari (iPad) scrolling performance when binding 'touchstart' to document
body: <p>I've been investigating some performance issues with scrolling my website on iPad Safari. We have some pages which are large <code>table</code> elements with up to 500 rows; the performance impact definitely seems related to the number of rows in the table (and, on pages without such tables, scrolling performance seems fine). Desktop browsers are perfectly fine.</p>
  
  <p>You can try this out at the following link. <em>NOTE: to repro, make sure to change the default of 25/page to 500/page.</em>
  <a href="http://www.cellartracker.com/list.asp?table=Notes&amp;iUserOverride=0&amp;T=1000" rel="nofollow">http://www.cellartracker.com/list.asp?table=Notes&amp;iUserOverride=0&amp;T=1000</a></p>
  
  <p>After doing quite a bit of debugging, I've found that if I remove any 'touchstart' events I've bound, scrolling performance is normal (and super-fast, as expected). I have a few <code>$(document).on('touchstart', '&lt;selector&gt;', function ()...)</code> events configured to assist with making some hover functionality accessible to touch devices. Currently, I bind to <code>$(document)</code> for two reasons:</p>
  
  <ol>
  <li>There can be a lot of elements that match the selector, so traditionally the performance of a single delegated event handler is better than 500+ handlers attached to each element (I just fixed some perf issues related to this on IE8).</li>
  <li>Some of the affected elements are loaded via AJAX, so those wouldn't automatically get the handler if I bound to the individual elements.</li>
  </ol>
  
  <p>OK, great--I've found the cause--but I don't know <em>why</em> this is a problem only on pages with large tables and how to work around it. For devices with <strong>BOTH</strong> touch and keyboard/mouse, I want each input mechanism to act consistently (so the <code>if (touch) bind('click') else bind('mouseenter')</code> approach isn't what I'm looking for). Plus, I'm also looking at implementing the <a href="https://developers.google.com/mobile/articles/fast_buttons" rel="nofollow">Fast Buttons</a> approach for some elements, which would likely necessitate binding to <code>$(document)</code> as that's where the corresponding <code>click</code> handlers currently are bound.</p>
  
  <p>So...any ideas on how to improve scrolling perf on these pages while still binding touchstart to <code>$(document)</code>? The HTML is pretty fixed at this point, but if there are <em>simple</em> tweaks to the DOM that would have a big impact I'm open to it.</p>