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: Ionic gestures not working #2115

Closed
voliva opened this issue Aug 31, 2014 · 12 comments
Closed

bug: Ionic gestures not working #2115

voliva opened this issue Aug 31, 2014 · 12 comments
Milestone

Comments

@voliva
Copy link
Contributor

voliva commented Aug 31, 2014

Type: bug

Platform: android 4.4 webview

I haven't tried in iOS "native hybrid", but in phone's browser it works perfectly, even the pinch gesture (at least for Android 4.4 and iOS 7)

I have made an app with a div that has the ionic gestures listeners in it. Then in the top there's another div that says which gestures have been detected.

What happens in the "native" android version:

  1. touch/tap/double tap/release works OK
  2. If you do it fast enough*, drag and swipe also works for very little time. Then it gets "released" and then is not working anymore.
  3. And if you go slowly, right when your finger is leaving the touch-start spot, it gets "released"
  4. Also, pinch gesture doesn't work at all.

Plunker here: http://plnkr.co/edit/XYrvChZ6o92r94mSt8Qb?p=preview
Project zip file: http://www.livewind.org/ionic/gestures.zip

@voliva
Copy link
Contributor Author

voliva commented Sep 19, 2014

I Tested in many other devices and I found that it only happens in Android 4.4
(Tested in android 4.1, 4.2, 2.3 [with a no-multitouch device, but drag works properly] and iOS 6 and soonish in iOS 7)

Also searching in the forums I found out this post: http://forum.ionicframework.com/t/ionicgesture-not-working-on-device-or-emulator/5992/19
They say they'd open an issue that I can't find. They also say that's happening only in Android 4.4

Isn't this issue a bit important? 1 every 4 androids are 4.4 (see https://developer.android.com/about/dashboards/index.html)... and it looks like Ionic Gestures in these devices don't work at all.

@voliva
Copy link
Contributor Author

voliva commented Sep 20, 2014

OK I think I found it. Debugging a bit the Chrome vs Native build I found out that in the Native build, the WebView was dispatching "touchcancel" everytime I move my finger from its place.
(Look for this.bindDom(element, ionic.Gestures.EVENT_TYPES[eventType], function bindDomOnTouch(ev) in the bundle)

From this article: https://plus.google.com/+PaulIrish/posts/KTwfn1Y2238, it seems that Chrome (Let me just point that Android 4.4 has a Chrome-based webview) dispatches a "touchcancel" event whenever he finds that a scrolling is happening. Might be this?

Is there any way to fix that?

@voliva
Copy link
Contributor Author

voliva commented Sep 20, 2014

Nah, now I defenitely found it! yay

1st link: https://developer.android.com/guide/webapps/migrating.html quote in "Handling Touch Events in JavaScript":
"[...] There are a few scenarios where touchcancel will be called, which can cause problems if not received:
-> An element is touched (so touchstart and touchmove are called) and the page is scrolled, causing a touchcancel to be thrown.
-> An element is touched (touchstart is called) but event.preventDefault() is not called, resulting earlier enough that touchcancel is thrown (so WebView assumes you don't want to consume the touch events).

Also, this stackoverflow helped: http://stackoverflow.com/questions/10367854/html5-android-touchcancel

Then, if I put a if(sourceEventType == "touchmove") ev.preventDefault(); right inside this.bindDom(element.... after setting sourceEventType fixes the problem.

@voliva
Copy link
Contributor Author

voliva commented Sep 20, 2014

Further testing I found out that this "patch" breaks ionic scrolling, so I'm not posting a pull request for it. But then this patch is not really needed if using scroll:

-> With scroll="false", gestures doesn't work unless you apply my patch
-> Without scroll="false", gestures work perfectly, but if you apply my patch then scroll doesn't work.

So the best solution by now is to keep the scroll in the content-view

@b8rother
Copy link

I think you got it right. It's the same issue that has been draggin' for a while. I opened an issue a while ago but have given up on this: #1057
In my app I'm not using scrolling and I'm interested to see your patch/solution.

@voliva
Copy link
Contributor Author

voliva commented Sep 22, 2014

My "patch" was to put a if(sourceEventType == "touchmove") ev.preventDefault(); right inside this.bindDom(element.... in the ionic bundle after setting sourceEventType, but this breaks the ion-scroll for the whole app, so it's not really useful if you need ion-scroll (for other pages than .

What I did to my app, as a workaround, is to keep the scroll in the content. If your element inside the content is using CSS height: 100%, you will also need to tell the scroll to fill the whole page (with height:100% as well).

@perrygovier
Copy link
Contributor

Confirmed, we should update our implementation of Hammer.JS. Many gesture events are not firing in Android KitKat

@perrygovier perrygovier changed the title bug: Ionic gestures not working bug: Ionic gestures not working (Update Hammer.js gestures) Oct 1, 2014
@perrygovier perrygovier changed the title bug: Ionic gestures not working (Update Hammer.js gestures) bug: Ionic gestures not working Oct 1, 2014
@perrygovier perrygovier added this to the 1.1 milestone Oct 1, 2014
@perrygovier
Copy link
Contributor

This is actually a duplicate of #1729. Lets continue the discussion there.

@apoku
Copy link

apoku commented Apr 30, 2015

Curious why all of these issues are closed? Using ioninc-1.0.0-rc5 I am still seeing this issue for pinch, pinchin, pinchout, transform events on Android 4.4.0 device. When I try on an Android 5.0 device pinch, pinchin, pinchout, and transform are captured flawlessly.

Is there an accepted workaround?

@askxp
Copy link

askxp commented May 12, 2016

+1

@skygragon
Copy link

+1 the issue is not fixed in latest v1 release, should we reopen it or just create a new one?

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 4, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants