We’ve done a significant overhaul of the tap/click system, basically to remove the 300 millisecond delay between tapping an element and firing its click method. There are a few pending issues with Ionic (like Android firing the click twice), but before I start to close them out I was hoping to get a few more testers involved to verify the fixes are working as expected.
The updates are in the master branch (v0.9.22-alpha), but not in a release yet. If you’ve got a second we could use to assistance testing.
A few notes about tap detection:
- When it comes to other tap detection solutions, much of the code to detect a tap we already have in Ionic. Therefore, so we hate to duplicate code and create more global event listeners which in the end do the same thing. Plus with ionic’s event system it’s reusable, like
ngTouch is good, but it does tap detection for the
ng-clickdirective, and not everything. So standard
<a href>links and focusing in on inputs wouldn’t have removed the 300ms delay. Ionic instead removes the 300ms delay for almost every touch interaction (like tapping inside a textarea and it quickly focuses without having to add ng-click to it). And for the same reasons of bullet point 1, we chose not to include duplicate code and want to reduce dependencies/code. However, if you are not using Ionic and just Angular, then I recommend using ngTouch.
- fastclick.js is also a widely known tap detection solution. It works great, highly tested and used by many. However, out of the box it didn’t work well with angular, and we were starting to add too many hacks to get it to work. And again, it’s duplicate code (which isn’t reusable), it adds more listeners and more overhead, and relying on a 3rd party dependency is something we’d like to avoid. But if you’re not using Ionic/Angular and looking for tap detection then I highly recommend fastclick.
The good news is that browsers are starting to remove the 300ms delay if zooming has been disabled via the viewport meta tag (and for that reason is another reason why simple tap solutions gets wonky). Right now I recommend this meta tag to go in the
<head> of your Ionic app:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
Please let me know how its working and what we can do to improve it.