Make Your Web Site Feel Like a Native App
Zentaps automatically removes the 300 ms tap delay on mobile.
Vanilla JavaScript. 442 bytes.
View Zentaps on GitHubAbout
Zentaps is a tiny JavaScript module which automatically removes the 300 miliseconds tap delay on iOS devices.
Features:
- Taps take less than 15ms instead of 300ms.
- Supports iOS Safari and browsers in iOS apps.
- Support for old Android browsers (2.3+) is coming later.
- Support for Windows Phone is coming later (if needed).
- Support isn’t needed for Chrome which already fixed the 300ms tap delay. (I wish Apple would do the same. The double-tap zoom & double-tap scroll are relics of the past.)
- Support isn’t needed for browsers that don’t support touch events (e.g., desktop browsers without touch screens).
- 442 bytes minimized & gzipped.
Zentaps observes touch events in the background. If there is no click event in a timely manner (that is, within 10ms) then Zentaps fires a click event and kills the ghost click that comes after 300ms. Of course, if the browser fires the click within 10ms (e.g., when you tapped a little bit longer on iOS) then Zentaps doesn’t have to do anything.
Install
Download Zentaps and include it into your page. A good place is at the very bottom, just before the closing </body>
tag. For example:
...
<script src="zentaps-min.js"></script>
</body>
There is nothing else to do. Zentaps automatically detects touch-capable browsers that need a speed-up.
You can also use npm to install Zenscroll:
npm install zentaps
Quick Tests
Tap these items in a touch-capable browser:
License
Public Domain. You can do with it whatever you want and I am not responsible for anything.
About Me
My name is Gabor Lenard. You can find me on Twitter as @zengabor. I am a product designer & developer, currently building zenvite.com. It never ceases to amaze me how people share their knowledge and what they make. Their work empowers us all. This here, however humble, is my way of contributing to this community & the wonderful continuum we call the world wide web.
Other projects by me:
- Zenfonts, a tiny JavaScript helper for @font-face loading.
- Zenscroll, a JavasScript module to smooth-scroll web pages and DIVs.
- Zenvite.com: Create beautiful invitation pages & get everybody on the same page.