Bug: slip:tap fires on reorder on mobile Safari

[lirbank]

On desktop browsers: If slip:reorder fires then slip:tap will not fire (correct)
On mobile safari: If slip:reorder fires then slip:tap will ALSO fire (incorrect)

I'll see if I can find more info about this, will add it here later.

[lirbank]

Update: Tested with Slip.js 1.2.0 and Chrome on IOS.

Slip.js 1.2.0:
OS X Firefox - passed
OS X Chrome - passed
OS X Safari - passed
IOS Chrome - passed
IOS 8.1 Safari - FAILED

I've only been able to reproduce the bug on Mobile Safari so far.

[henrikhermansen]

Experiencing the same issue in the web view of a PhoneGap application on iOS. I tried to listen for 'slip:reorder', 'slip:tap' and 'click' on a list of links, each in their own li in a ul. When tapping an item I get slip:tap, then it redirects to the link, and then I get slip:tap, click. When I rearrange the list I get slip:reorder, slip:tap, click. Btw. this all works fine on Android: when tapping I get slip:tap and click, when rearranging I only get slip:reorder.

[henrikhermansen]

"Most events, including mouse events, bubble up. That is, if the user triggers a mouseover on an element, the browser sees if that element has an onmouseover event handler, and if so executes it. Then it does the same with all the element’s ancestors up to and including the document. This is standard behaviour that works everywhere — except in Safari iOS.

When the user touches a touchscreen, the browser reacts by firing a cascade of events that includes the touchstart and touchend events, all mouse events, and click."
http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

It seems that slip is behaving like it should actually. But it would be really nice if @pornel or someone else managed to handle these crazy iOS events in a sensible way.

[lirbank]

Here is a quick workaround I wrote back when I reported this issue. The example code is written in MeteorJS, but the same concept can be used for any framework. Would be great to implement the workaround in the slip.js lib at some point, but for now I hope this will help anyone who run into the same issue.

// TAP FIX: Var to know if Tap should fire or not.
var preventTap = false;
Template.MyTemplate.events({

  // The slip event:
  'slip:reorder #slippylist': function (event, template) {

    // TAP FIX: Detect if it's Safari on IOS
    if(BrowserDetect.OS !== 'Mac' && BrowserDetect.browser === 'Safari') {
      preventTap = true;
    }

    // Handle the Reorder event as usual
  },

  // Tap/click event
  'click #slippylist': function (event, template) {

    // FIX: Check if Tap should fire or not, and if so reset preventTap
    if (preventTap) {
      preventTap = false;
      return;
    }

    // Handle Tap event as usual
  }
});

[BRadHoc]

I'm experiencing I think the same issue, however the taps stop getting recognised and other button bindings when a user double taps on another part of the page.