Flickity had a bug. Tapping on the previous & next buttons felt slow on iOS. It's a small but important behavior. If the user doesn't immediately get feedback of their click, they are likely to click again in case they miss-clicked. This could trigger two delayed click events and throw off the state of the UI from the user's intent.

Try out this click event demo in a mobile browser.

See the Pen EabQgK by David DeSandro (@desandro) on CodePen.

On a desktop browser, the click event fires immediately. But on iOS (v8.1.3) Safari (and on iOS Chrome v40), the click event happens after a little delay.

Interestingly, if you hold down the tap a bit longer, the click event fires immediately when the touch is released.

Jake Archibald explains:

If you go to a site that isn't mobile optimised, it starts zoomed out so you can see the full width of the page. To read the content, you either pinch zoom, or double-tap some content to zoom it to full-width. This double-tap is the performance killer, because with every tap we have to wait to see if it might become a double-tap, and that wait is 300ms.

The solution recommended there is to use disable page zooming.

<meta name="viewport" content="width=device-width, user-scalable=no">

This may work for some recent mobile browsers, but in my testing, I don't see an improvement. It also requires changing with the meta viewport tag, which is something a third-party library shouldn't be messing with.

Tap Listener

For Flickity, my solution was to build a little library to handle this one job. Tap Listener listens for taps. It listens for mouse, touch, and pointer events to trigger .on( 'tap', callback ).

See the Pen Click event - with tap listener by David DeSandro (@desandro) on CodePen.

The results are much better. Taps are triggered immediately. You can do multiple taps in quick succession. It feels natural.

Looking at the video, you can notice that 300ms click delay. It seems awkward compared to the immediate tap event. When you touch something, you have an implicit expectation that your touch will have an immediate effect. Bringing UI behavior closer to real-world behavior helps make it feel natural and comfortable to use.

Previously

If you're just joining us, I'm making a new gallery library! The story thus far...

• Initial demos
• Math time: Resting position
• Particle to slider
• Flickity begins
• Making SVG buttons
• The best time
• Setting JavaScript functionality with CSS
• Front-end testing with QUnit
• Flickity beta testing
• Lots of files, but only one in my head
• Making features independent with internal events

Flickity beta is out. Give 'er a flick!