Fastclick and Mobile Safari Issues

I’m noticing a couple strange issues with fastclick on mobile Safari.

The first major showstopper is when using it with Bootstrap and buttons, one really strange quirk is if my page is longer than the viewport and a user has to scroll to the bottom of the page to touch a button, that button will “hover” after the touch and must be touched again in order to fire it’s click .button event. I couldn’t figure out what was causing this because some page’s buttons worked correctly and some didn’t. I finally narrowed it down to any page that doesn’t exceed the vertical real-estate of the device’s screen (i.e. no scrolling needed) works correctly. So imagine a page of content with a button at the bottom.

To work-around this I removed fastclick and every button, no matter the page length, worked fine. The click .button triggered on a single touch.

So to try to get around this, I figured I could just add the .needsclick class to the buttons since that would make them act like normal and not cause the fastclick issues. However, .needsclick doesn’t seem to do anything. I still get the same behavior. I even tried the rounce:fastclick fork that mentioned fixing some .needsclick issues.

This is really strange. I’m not sure if the .needsclick issue is related to Meteor. Anyone else experiencing anything like this? I know there’s some wonkiness with mobile Safari, touches/clicks, and hover states, but the odd thing is everything works as desired with fastclick removed.

A couple questions:

  • Can you put together a simple reproduction on github?
  • Does it happen in the iOS Simulator?
  • What version of Bootstrap?
  • What version of Fastclick?

I read recently that mobile safari was removing the delay which fastclick avoids. I am not certain when that update happened - or if it is still pending. Could it be that fastclick has been impacted by that change in the latest iOS and is not behaving correctly.