Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: slip:tap fires on reorder on mobile Safari #33

Open
lirbank opened this issue Nov 22, 2014 · 5 comments
Open

Bug: slip:tap fires on reorder on mobile Safari #33

lirbank opened this issue Nov 22, 2014 · 5 comments

Comments

@lirbank
Copy link

lirbank commented Nov 22, 2014

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
Copy link
Author

lirbank commented Nov 22, 2014

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
Copy link
Contributor

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
Copy link
Contributor

"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
Copy link
Author

lirbank commented Dec 18, 2014

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
Copy link

BRadHoc commented Mar 25, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants