Static click not firing in Safari

[josephdpurcell]

Problem

Safari version: Version 14.0 (15610.1.28.1.9, 15610) Flickity version: 2.2.1

Use Flickity slider and have an anchor element that has a div wrapped around it that has a click event listener.

Only in Safari, what was observed is the pointerdown event would fire, but never the pointerup, and therefore not the staticClick either, as described here: https://flickity.metafizzy.co/events.html#staticclick.

Test case: https://codepen.io/josephdpurcell/pen/pobVMbg

Unfortunately, I've been unable to reproduce the issue in the above test case.

Proposed Resolution

As best I can tell, what was happening is the logic that runs to focus the flickity slider would trigger on pointerdown, the position of the mouse would move, at this point the pointerup event would fire, the distance between the pointerdown and pointerup would be greater than zero which would cause the static click to not fire.

To work around this, I was able to put a high z-index on the div element that had my custom click handler, so that I could use that click handler instead of the staticClick handler which wasn't firing.

I did attempt to use the accessibility: false technique as described here https://github.com/metafizzy/flickity/issues/194 just to see if that would allow staticClick to fire, and it did not work.

I attempted to use the https://github.com/metafizzy/flickity/issues/326 solution of pointer-events: initial and that did not work either.

All that said, this ticket is simply to document that I ran into this Safari-specific issue and share the workaround, which was to have a high z-index on the clickable element.

[josephdpurcell]

I'm closing this issue since it's not reproducible in a test case. This ticket can simply serve as documentation until someone can reproduce it, or also reports the same issue.