Here's a sample page to demonstrate the issue:
Open it on an iPhone or iPad and start tapping on the radio buttons. Notice the short delay before the box colour changes? Perhaps not. Okay, so try this page instead:
Much faster to respond to the radio buttons than the first page, yes?
If you don't have an iOS device to test with, then I've done a video capture of my accessing the two pages with my own iPhone. (The white circles that you see, correspond to my finger tapping on the screen.)
There's only one difference between the two pages: the second page has the fastclick.js library loaded. This library does some behind the scenes re-mapping of click events, so you can get that speedier response time without having to rewrite your click events to touchstart or touchend events, as I'd recommended in my original post. (Using the touchstart event has the disadvantage of disabling drag for the element on which you have it set.)
When, hopefully, the whole 300ms problem is fixed in a later version of iOS - as it already appears in more recent versions of Android - then all you have to do is remove the fastclick library from your apps.
- Comments