Is it possible to have FastClick work with webkit-overflow-scrolling?

[ProcuraIsaac]

FastClick works very well, but when paired with webkit-overflow-scrolling which does the iOS scrolling momentum, the clicks are registered as the elements scroll by.

It would be nice for fast click to wait until the scrolling is finished or stop the scrolling when the user clicks.

Is there a way around this?

[th507]

I think I could reproduce this scenario. See the following gist.

https://gist.github.com/4277995

[ProcuraIsaac]

That demonstrates it perfectly. I've added a fiddle to show it based on th507 scenario. Just run this on an iOS device.

http://jsfiddle.net/2mguL/embedded/result/

Ideally, the first click would stop the animation. Then the user could click again to have the event registered.

[netpro2k]

I notice that fastclick also causes elements with -webkit-overflow-scrolling: touch to jump scroll position intermittently as the user is scrolling. As you scroll you will notice the scroll position momentarily jump to a different spot, then snap back. This is somewhat more noticeable in the simulator, but also very noticeable on a real device.

You can see this in the jsfiddle posted above (direct link works better with viewport http://fiddle.jshell.net/2mguL/1/show/light/ )

[noteflight]

I'm seeing the same as netpro2k with the intermittent jump scroll. I didn't realize it was fastclick until I saw his post.

Interestingly the jumping doesn't happen if your finger is in contact with the screen while scrolling, only during inertial "scroll-by" motion.

[mattcg]

Thank you for commenting and sorry there's been no update to this up till now. @th507 thank you for the gist; @ProcuraIsaac and @netpro2k thanks for the jsfiddle links - these are all very helpful.

I'm looking into this now.

[mattcg]

I think there are issues with changing the document contents during touchstart and touchmove events. From the Handling Events chapter of the Safari Web Content Guide:

Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. > This behavior allows the user to tap in the new content.

If you see the version of the test case I committed, I'm logging the debug messages to the console instead of writing them to the DOM. I can't reproduce the issue after doing this.

The only problem is that in the click callback, event.target is the element that would have been clicked on had the layer not scrolled at all.

[matthew-andrews]

Sorry @mattcg, I see this issue on your test case on iOS 6 / iPhone 4S.

[mattcg]

Bizarre. It seems to behave to differently on the iPhone. My fault for only testing on iPad. Thanks for the heads up.

[mattcg]

Added a non-trivial workaround for this issue.