Flickity v1.1.1

2 Sep 2015 · by David DeSandro

Flickity's latest patch release will make your fingers happy. Flickity v1.1.1 fixes several touch device bug. Let's investigate!

Fixed freeScroll bug flicking past ends

The issue: #181. With freeScroll, with a big flick, you could flick the slider completely out of the carousel.

The fix: This bug was a regression — it didn't occur in previous versions. It was caused by using a different calculation for resting position after a flick. In an earlier change, I over-thought a solution and 'fixed' a problem that actually wasn't occurring. Reverting to the previous calculation fixed it.

Learned: The real trouble is that behavior features like flicking and dragging are difficult to reliably test. I have implemented some tests that fake these behaviors, but they don't always pass test 100% of the time. When I introduced this bug, the tests either didn't catch it, or I didn't have a test for it.

Fixed prepend animation regression

The issue: #201. Using prepend or insert would cause the slider to animate. Another regression.

The fix: Set the position after inserting cells.

Learned: This regression was introduced with lazyLoad. I changed the behavior when adding or changing cell size. But I didn't think to see how this change affected prepend/insert.

Allow range input sliding

The issue: #216. Range type <input>s would not be able to slide within a Flickity cell.

The fix: Add logic so that any pointer on a range only works on the range, and does not trigger any Flickity behavior. While you can drag a Flickity slider by tapping down a button, or a text input, you cannot by tapping down on a range.

Learned: Sliders in sliders happen.

See the Pen Flickity - Range Input Test by Praveen Puglia (@praveenpuglia) on CodePen.

Fix asNavFor double movement bug in iOS

The issue: #189. With iOS, tapping on a nav gallery using asNavFor would cause it to shift once then again.

Learned: The bug was caused by iOS emulated click event. iOS and older versions of Chrome for Android fake a click event 300 millisecond after a user taps on the screen (See also Taps are faster than clicks). Typically, this click event is harmless, as the earlier tap event works as well on Flickity. But with the asNavFor, it was causing a tap/click to occur on two different cells. The behavior worked something like this:

Tap on the cell to move
Nav gallery shifts to new cell
Fake click is triggered on new cell where previous cell was
Nav gallery shifts again

The fix: I added timing logic to listen for these fake click events that happen after touch events. It's a bit of a hack, but it does the job. No double taps.

Fixed staticClick triggering after scroll on touch devices

The issue: Flickity's staticClick event was being triggered after scrolling the page on a touch device.

The fix: After pressing down, listen for scroll events. If page scrolls a bit, cancel the click behavior.

Learned: Touch devices do this as a standard behavior as part of their OS. You can press down on a button, and see that button activated. Once you start scrolling the page, the button is deactivated.