Pan events in ios 13 aren't behaving as expected

399 Views Asked by At

I'm trying to fix a bug that appears only on iOS13 with a horizontally scrolling image gallery. We're using Hammer.js, and users are able to swipe left (to get the next image) properly, but they aren't reliably able to swipe right (to get the previous image). As I said, this is iOS 13, on both Safari and Chrome.

I set up logs to check the pan events, and here's what happens.

If you drag your finger to the left, the deltaX (distance on the x-axis) behaves appropriately - the distance goes something like -11, -22, -41, -58, -68, -84, -101, -114, -124, and we hit the next slide function.

But if you drag your finger to the right, the delta-X goes something like 21, 27, 42, 67, 88, 102, 124, 138, 142, -61. That last -61 doesn't trigger the previous slide function because it's too small (we only trigger previous or next if your pan is greater than 1/4 the screen width) And it's in the wrong direction, so occasionally swiping to previous triggers the next slide!

I can't figure out where that random last number comes from. It's generally less than 100 and can be positive or negative. And it only happens when panning to the right. Occasionally (1 out of 10 times) we don't get that last wonky number and swiping right works, but it's rare and doesn't seem related to velocity or distance.

The code is super simple:

mc.on('panstart', function(e) {
    //overlay stuff
});

mc.on('pan', function(e) {
    //debounced overlay stuff for prefetching the next slide
});

mc.on('panend pancancel', function(e) {

    if (Math.abs(e.deltaX) > gallery.width / 4) {

        if (e.deltaX < 0) {
            next();
        } else {
            prev();
        }
    } else {
        //do nothing
    }
});
0

There are 0 best solutions below