sourcebitsllc / chocolatechip-ui

Mobile Web App Framework
www.chocolatechip-ui.com
MIT License
616 stars 88 forks source link

Gestures not working on Android #36

Closed nickGermi closed 10 years ago

nickGermi commented 10 years ago

Gestures (swipe left or right) doesn't seem to be working on Android (on my Nexus 4 anyway), I've tried Chrome and default Android browser, also tried it on CUI demo website (deletable lists where it says swipe to cancel) and it doesn't work.

However using Chrome on my computer and emulating touch events and forcing user agent as Android, gestures do work.

Gestures also work fine on iOS.

P.S. I'm using latest jQuery and latest version of CHUI at the time of writing this.

sourcebits-robertbiggs commented 10 years ago

The problem with gestures that you are experiencing on Android is due to a decision by the Google team responsible for mobile Chrome to use gestures for history navigation, etc. in their mobile browser. Because they are cooping all gestures, there is no way to capture gestures on Android with mobile Chrome. Gestures should work with the older native Android browser, as I have done extensive testing with that. There is a way of enabling gestures on the Android browser, but it disables scrolling on all html elements. You can capture a touchMove event, but the browser never exposes the touchEnd for it. If you do Google search for gestures for mobile Chrome, you'll find lots of frustrated developers. Recently I spent a week trying to find some way to get gestures working with Android 4.4 Kitkat, but it was hopeless since it always resulted in not being able to scroll a page. If your use case is a single screen that doesn't require scrolling, a very limited scenario, then you could get gestures working. Since both Apple and Microsoft have gestures AND scrolling working in the browsers, and Google had them working fine in their native Android browser, I don't know what to say. That said, I'm always coming back to the gestures module to see if I can find some way of getting around Google's kidnapping of gesture events. By the way, If you want to devel into the gestures module, feel free to. Log out values and what what happens. Maybe you might come up with a way to get around the lack of a touchEnd event for touchMove events.

nickGermi commented 10 years ago

That is strange because I've also tried the stock Android browser (not chrome) and swipe still didn't work, however for example opening this website on my android mobile (chrome), I can swipe right and left and also scroll up/down the page http://stephband.info/jquery.event.swipe/ (image slider can be swiped)

Maybe if I can manage to replace gesture codes from CHUI with this plugin I can overcome the issue, I'll try anyway. And thanks for putting so much time into this, really appreciated.

sourcebits-robertbiggs commented 10 years ago

I check out the link. I did notice that his code does not work on Windows 8, 8.1 on touch screens or on the Surface due to lacking support for Microsoft pointer events. Easy to add that in though.

So, after analyzing his plugin, jQuery.event.move, which is the basis of his swipe implementation, I see he’s not even trying to trap the touchEnd event after moveStart. Instead he’s checking for touchesChanged, then grabbing the coordinates and checking with the coordinates from the touchStart. That’s a very short distance for tracking a gesture, maybe something like 5 pixels, whereas I was using 30 pixels to prevent false gesture detection.

I’ll need to go back and refactor the gestures module with that in mind. Unfortunately I’m really tied up with a lot of things for the next week, so I won’t have time to tackle this until after. Are you using jQuery with your build? If you are I’d suggest you use his plugin for now. (you need both jQuery.event.move and jQuery.event.swipe).

I’m thinking I’ll make this and Android specific fix in the code so that iOS and Windows remain as they are with touchEnd and pointEnd events.

Cheers

Robert

Product Director ChocolateChip-UI

San Francisco

On Jan 9, 2014, at 8:00 PM, ez666 notifications@github.com wrote:

That is strange because I've also tried the stock Android browser (not chrome) and swipe still didn't work, however for example opening this website on my android mobile (chrome), I can swipe right and left and also scroll up/down the page http://stephband.info/jquery.event.swipe/ (image slider can be swiped)

Maybe if I can manage to replace gesture codes from CHUI with this plugin I can overcome the issue, I'll try anyway. And thanks for putting so much time into this, really appreciated.

— Reply to this email directly or view it on GitHub.

nickGermi commented 10 years ago

I ended up using a plug-in as you suggested however switched to TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin with this one by default it detects the swipe after 70px move which is better than previous plug-in (not sure about windows support though).

Cheers

sourcebits-robertbiggs commented 10 years ago

Finally fixed the issue. I had to add in a check for Android, then capture the distance and direction during the touchMove phase instead of waiting for a touchEnd to occur. That means it's a rather short detection length for Android, just 10 pixels as compared to 30 pixels for everyone else. But it seems to be working, while still allow the user to scroll the page. Be aware the it takes a precise placement of the finger on the screen to detect a swipe. A very casual swipe may not be caught.