Unreliable touchend events on iOS5

Unreliable touchend events on iOS5

Click events have a higher latency in web applications because the OS is waiting to see if you are really going to be double tapping.  Touchend events, however, are nearly instantaneous and are perfect for triggering animations and events.  Google, jQuery Mobile and many others rely on these touchend events to make their apps as responsive as native apps.

Unfortunately there exists a scenario where the touchend route is very flakey on iOS5.  The touchend event is unreliable when tapping a scrolling <div>.  The <div> must have the overflow style property set to scroll in this case.  I created a simple test page to demonstrate this issue here:

 

Click here to see the bug in action.   (Make sure to be on an iPad or iPhone with iOS5)

 

Notice that the incorrect target is logged if you scroll then tap.  This doesn’t happen if you are scrolling the document instead of an overflow:scroll <div>.  It also doesn’t happen if you rely on the click event since that event is never sent.  This is not an issue on android either because android prevents the event from being triggered (just like click on iOS).  It is only an issue when scrolling the <div> and listening for touchend events.

You can bypass this whole issue by relying on click events instead of touchend.  However, this kills the responsiveness of your app.  I have worked around this by using timers and scroll event listeners to prevent the touchend event from propagating, but it is very kludgy and not a reliable solution.  I am currently compromising by triggering the action with the click event (slow, but reliable) while animating the tap state with the touchend event (fast, but buggy).

Have any of you ran into this situation?  If so, what have you done to work around it?  Let me know in the comments or at @gototen.

Submit a Comment

Your email address will not be published. Required fields are marked *