Swipe problem on Android

[chrlsbr]

Since * SHA 88349457f3c4f14891050db45b2f479dd9af1cf7, I can't get 'swipeLeft' and 'swipeRight' to work correctly on Android devices. I use a Nexus 7 2013 (Android 4.3), a Galaxy Tab 10.1 (Android 4.0.4) and a Galaxy S (Android 4.2). Some tests I ran:

• Android default browser: doesn't work
• Google Chrome: doesn't work
• Mozilla Firefox: works perfectly
• Opera for Android: doesn't work

Same problem with the example touch_events.html file shipped with zepto. I'm not much of a developer so I may have done something wrong, but everything works fine with # SHA 488e773d1b754712bb193e7a2f81896e79734daf.

[miketaylr]

Would you be able to link to a minimal test case? That would be super helpful in diagnosing.

[ellison13tj]

I also can't get all about 'swipe' to work correctly on Android devices. I use a Nexus 4 ，xiaomi 1S 。

[mark-bradshaw]

I'm not sure if this is exactly what the original person was seeing, but here's a simple codepen example that demonstrates the problem for me.

http://cdpn.io/lHJzI

You can edit the pen to see what's going on, but it's stupid simple. You should be able to swipe left or right that red box and get an alert that says "swipe". This works fine on IOS, but does nothing on my Nexus 4 with 4.4 installed.

[wmartins]

Same problem here @mbradshawabs . Very strange. Also, I've tested in Android 4.2.2 (Samsung Galaxy S II) and the same problem occurs.

[wmartins]

Hey guys, I've found some interesting topic about the problem here: https://code.google.com/p/android/issues/detail?id=19827

So, I added e.preventDefault() to the line 92 (inside 'touchmove' event handler) on the file touch.js and everything worked fine...

Can you test this?

[lukemorton]

I can confirm I have this problem with Nexus 5 Chrome and the e.preventDefault() in touch.js:92 fixes the problem.

[mark-bradshaw]

I had this problem primarily in another library I use, that functions very similarly. I didn't test the proposed solution in zepto, but I did implement a similar patch in the other library with success.

[lukemorton]

This e.preventDefault() also stops a div from scrolling for me.

[mark-bradshaw]

I think the final solution will need to be a bit more than just e.preventDefault. If you read the original thread linked to by wmartins, you'll find a bit more sophisticated approach that at least shows the path to a work-around for this google bug.

[husa]

Yeah, I can confirm this problem on Nexus 7 2012, Nexus 7 2013, Nexus 4, Moto G, SGS4 and few others. Thats because android is not firing "touchend" event, only first "touchmove" is fired, if you do nothing, android thinks that you're trying to scroll and prevents any further events from firing. As for me, I was interested only in horizontal swipes(left/right), so I added if (deltaX > 30) e.preventDefault() in "touchmove" listener, so if horizontal distance between "touchstart" and first "touchmove" is more than 30px than it's supposed to be swipe. But this solution will not work for "slow" swipes and so on.

[danielfbm]

I am also having the same issue, mostly with Android 4.4 in the WebView (Cordova App). Is anyone going to fix this in Zepto? Thanks

[TNT-RoX]

There are two different issues here the first is due to different pixel densities. The second issue is on kitkat only and is caused by kitkat firing a cancel instead of a end event. Here is the fix: UPDATED

.on('touchcancel touchend MSPointerUp pointerup', function(e){
var swipelength;
    if((_isPointerType = isPointerEventType(e, 'up')) &&
        !isPrimaryTouch(e)) return
    cancelLongTap()
    swipelength = Math.round(30 / window.devicePixelRatio);
    if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > swipelength) ||
        (touch.y2 && Math.abs(touch.y1 - touch.y2) > swipelength))

http://developer.android.com/guide/webapps/migrating.html#TouchCancel

[songhlc]

it worked fine use your method.thanks wmartins commented on 2013年12月20日 Hey guys, I've found some interesting topic about the problem here: https://code.google.com/p/android/issues/detail?id=19827

So, I added e.preventDefault() to the line 92 (inside 'touchmove' event handler) on the file touch.js and everything worked fine...

Can you test this?

[TNT-RoX]

For better scaling try : swipelength = Math.round(30 / window.devicePixelRatio);

[TNT-RoX]

I have created a proof-of-concept shim to overcome this Android bug. https://github.com/TNT-RoX/android-swipe-shim

[ralfhauser]

I have the same problem with an iPad.

Is https://github.com/madrobby/zepto/blob/master/examples/touch_events.html deployed anywhere publicly accessible for tests?

[ralfhauser]

Hmmm, got it to work again with http://www.awwwards.com/touchswipe-a-jquery-plugin-for-touch-and-gesture-based-interaction.html On page Demo doesn't work, but a few samples are here: http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html

Download: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

[madrobby]

Hi there, does anybody in here have a PR w/ tests that we can apply?