title: iPhone web-app (built on jQTouch) - animations jerky since iOS 5
body: <p>In July I built an iPhone web-app using jQTouch. On iOS 4 I had no problems with the web-app: The built-in jQTouch animations (slide left, slide right) etc were smooth as silk.</p>
  
  <p>However, since the upgrade to iOS 5, these core page transition animations (slide left, slide right and flip) have become very jerky.</p>
  
  <p>The web app can be found <a href="http://sdt-app.dconnell.co.uk" rel="nofollow">here</a> (please add it to your home screen on your iOS 5 iPhone):</p>
  
  <p>To see the effect, once it's added to your home screen, start the app and keep tapping the main buttons - Speed, Distance or Time.</p>
  
  <p>I've done a lot of Googling and have found nothing, though I'm sure that other developers must have been / will be affected by this issue.</p>
  
  <p>The issue is not just limited to my 3GS device as I have tried it on other people's devices (including iPhone 4) and I see the same issue, but only on iOS 5.</p>
  
  <p>Stuff I have tried:</p>
  
  <ul>
  <li><p>updating my jquery.js to different versions - including the latest - animations still jerky</p></li>
  <li><p>updating jQTouch to the latest version - animations still jerky</p></li>
  <li><p>stripping out all JavaScript, only leaving jQTouch and its initialization - animations still jerky</p></li>
  <li><p>removing all of my custom css, only leaving the default jQTouch CSS - animations still jerky</p></li>
  <li><p>removing all CSS, apart from just the CSS3 animations in jqtouch.css - animations still jerky</p></li>
  <li><p>removing html elements - i noticed that when i removed all of the <em>select</em> and <em>input</em> elements from the web app, the animations became smooth again. However, there is nothing strange about the mark-up or CSS attached to these elements. Could this issue simply be to do with having too many elements on the page at once during an animation?</p></li>
  </ul>
  
  <p>So it seems this issue is to do with HTML elements rather than JS or CSS, although I really can't figure out why...the mark-up is all valid <strong>apart from</strong> the iphone specific attributes i've used such as <em>placeholder</em> and <em>autocapitalize</em> etc.</p>
  
  <p>Strange thing is that the animations on the <a href="http://jqtouch.com/preview/demos/main/" rel="nofollow">jQTouch demo</a> still seem smooth on iOS 5.</p>
  
  <p>Any help/suggestions much appreciated.</p>
  
  <p>Thanks!</p>
  
  <p><strong>Edit</strong>: Also, the button on the 'Info' page that 'bounces' has become jerky too. This uses the jQuery UI bounce effect. This was animation completely smooth on iOS 4.</p>