Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Swipe is buggy on Chrome/Android #5534

Open
dzhongxu opened this Issue · 107 comments
@dzhongxu

A panel should be closed when users swipe left or right. But this function does not work in Galaxy S1 and S3 for 1.3.0 beta.

@jaspermdegroot
Collaborator

@dzhongxu

Do you mean swipe on the panel or on the page? The latter has been added after 1.3 beta 1 so that works with latest code. Haven't noticed issues with that on Android.

Closing as fixed. If you still see an issue, please comment and provide a test page. Also, include information about Android version, jQuery core version, etc.. See the contributing guidelines.

@dzhongxu
@dzhongxu

The panel is not closed when swipe both on the panel and page. Only closed when touch the page. It seems the swipe event is not captured in Android.

Testing page:
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

@dzhongxu
@jaspermdegroot
Collaborator

@dzhongxu

Same page, latest code: http://jquerymobile.com/test/docs/panels/index.html
A swipe left on the panel or the page should close the left panel. Swipe right for right panel.
Can you still reproduce it?
Also, what Android version?

@dzhongxu
@dzhongxu
@jaspermdegroot
Collaborator

Just tested http://jquerymobile.com/test/docs/panels/index.html on a Galaxy Nexus running Android 4.1.1 and I don't see any issue.

Does swipe work on your device if you test these demos?
swipe to open panel: http://jquerymobile.com/test/docs/demos/demos/panels/panel-swipe-open.html
swipe to nav between pages: http://jquerymobile.com/test/docs/demos/demos/swipe/newyork.html

@dzhongxu
@jerone

I just tested all links above on Samsung Galaxy S3 (Android 4.1.2) on the native browser and aldo all swipes work, it's very hard en not consistent, I had to try multiple times in most cases.
For example on the image demo, if I do multiple swipes in the same direction and same way, some times it doesn't work. I couldn't find any reason why.

I also tested it on Chrome, Chrome beta, Firefox, Firefox beta and Opera Mobile, I had no issues with the swipes.
Opera Mini didn't work, but I expected that.

@jaspermdegroot
Collaborator

I changed the title of this ticket because it is not a panel issue but a swipe problem.

Swipe doesn't work on:
Samsung Galaxy S1 / Android 2.3.6
Samsung Galaxy S3 / Android 4.1.1

Issue cannot be reproduced on:
Samsung/Google Galaxy Nexus / Android 4.1.1

test pages:
swipe to close panel: http://jquerymobile.com/test/docs/panels/index.html
swipe to open panel: http://jquerymobile.com/test/docs/demos/demos/panels/panel-swipe-open.html
swipe to nav between pages: http://jquerymobile.com/test/docs/demos/demos/swipe/newyork.html

@jaspermdegroot
Collaborator

@jerone

Thanks!
Was closing the panel buggy too?
What Android version is your S3 running? Also 4.1.1?

@dzhongxu
@jerone

@uGoMobi

Yeah every swipe action was buggy. In the end the action always executed, but I had to try multiple times before it worked.

@uGoMobi, @dzhongxu
Confirmed that link works (jQM 1.0 :cry: )

@jaspermdegroot
Collaborator

Thanks again @jerone !

I changed the title again... from broken to buggy.

Not sure if that PhotoSwipe demo is a good reference, because I would have to see their code if they modify anything. But if swipe works better on that demo with JQM 1.0rc2 than with latest code we should check if this is a regression.

@dzhongxu
@dzhongxu
@arschmitz
Owner

testing on http://jsbin.com/uzaret/891 swipe works perfectly and very responsive on all devices test this includes.
Samasung Galaxy S3 4.1
Samsung Galaxy S2 4.1
Samasung Galaxy S1 2.3.5
Samsung Galaxy Note2 4.1
LG Optimus 2.2
HTC Thunderbolt 4g 2.3.7
HTC Incredible 2.3.4
Motorola Xoom 4.0
Nokia Lumia 520 WP8
iPhone 4 ios5
iPhone 4 ios6
iPhone 5 ios6
iPad 2 ios 5
iPad 2 ios 6
Blacberry 10
Blackberry Playbook
Closing this as Fixed on master

@arschmitz arschmitz closed this
@jyohere

Swiping is not working properly when we use Jquery Mobile on Android and Windows devices. Swiping is not smooth or sometimes it does not work at all.

$(document).off('swipeleft swiperight','.test')
.on('swipeleft swiperight','.test', function(event) {

swipe(event);
});
.test - refers to a div class.

Please help. And, what is the problem in JQM, even it is not working on Samsung galaxy S4 native browser. Is there any easy way to achieve this.

This is not panel Swipe. This is swipe of a div section in a page. Am using jqm 1.3.1. If there is any fix, please let me know how should i incorporate this fix.

@agentfitz

I am also noticing very inconsistent swiping behavior on my android device (Galaxy Nexus) running Chrome mobile. Swiping almost always takes 2-5 attempts before the event finally triggers. I even noticed this behavior on the jquery mobile swipe demo page: http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/swipe/newyork.html

the swiping is 100% consistent and smooth on my iOS test devices such as an iPhone 4.

@arschmitz
Owner

@agentfitz you are trying an old beta version on a demo thats not something thats actually part of the library to test please try the jsbin in my previous comment

@agentfitz

Hi there, thank you for the response. I just visited the page referenced in your post: http://jsbin.com/uzaret/891

But I'm not quite sure what the demo is. I tried swiping on the page and nothing happened. I then drilled down on jquerymobile.com/test and went to the demo showcase where I eventually found the "swipe to navigate" and "swipe to delete list item" demos. I wasn't able to get either of them to behave as I expected using swiping.

Did I go to the wrong place?

@arschmitz
Owner

@agentfitz on that page simply swipe left or right and it throws an alert "swipeleft" or "swiperight" just tested on additional devices
HTC Desire S 4.0
Motorola Atrix 2 4.0
Samsung Galaxy S4 4.2.2
Samsung Galaxy Nexus 4.2.2
LG Nexus 4 4.2.2
Firefox OS

@agentfitz

I understand Alexander. I was on 1.3.1 and the swipe was misbehaving, but when I looked at the source on your demo page and switched my app to the "latest" jquerymobile code, the swipe worked perfectly. Being in a pre-release state though, it did break some other stuff on me, such as formatting of controlgroups and such.

Anyway, really pleased this will be fully addressed in an upcoming release! Thank you for your help.

@jyohere

When is the scheduled next release of Jquery Mobile with this swipe fix. Please let us know.

@AGPX

Tested on Samsung Galaxy S2 with Android 4.1.2 and JQM 1.3.2 with the following browsers:

  • Built-in: swipe doesn't work;
  • Chrome: swipe doesn't work;
  • Opera: swipe doesn't work;
  • Firefox: it works;

The first 3 browser behaves identically and swipe gesture is bugged as reported above. Firefox is slow, but the swipe works. So, shouldn't be an Android issue, but something in common with the 3 browser, perhaps webkit (on Android only, because with Safari on iPhone/iPad the swipe works like a charm).

@jaspermdegroot
Collaborator

@AGPX

Can you test the same with latest code and post a link to the test page. Here is our JS Bin template that you can use http://jsbin.com/upirol/1/edit. Thanks!

@AGPX

@uGoMobi

Tested, but the behaviour is changed also for working browser. With older JQM, I had:

  • when you start swipe: $.event.special.swipe.start;
  • when you move finger: $.event.special.swipe.stop;
  • when you end swipe: $.event.special.swipe.handleSwipe;

now I have:

  • when you start swipe: $.event.special.swipe.start;
  • when you move finger: $.event.special.swipe.stop and $.event.special.swipe.handleSwipe;
  • when you end swipe: $.event.special.swipe.stop;

then $.event.special.swipe.stop is still called moving mouse (tested on Chrome on PC).

this fully breaks my swipe logic.....

@AGPX

P.S.: I have posted a test in the link: http://jsbin.com/upirol/7/edit.

@AGPX

Instead, it works (but not on Android) with JQM 1.3.2, look at that link:

http://jsbin.com/upirol/8/edit.

(and also it looks quite different, is the css correct?)

@dgarlitt

Swipe is not working consistently on Samsung Galaxy S4. I tried the following demos with three separate brand new S4's and all of them responded poorly and inconsistently:

http://view.jquerymobile.com/1.3.2/dist/demos/examples/swipe/swipe-page.html
http://view.jquerymobile.com/1.3.2/dist/demos/examples/swipe/swipe-list.html

@arschmitz
Owner

@dgarlitt please read the rest of the thread this has been fixed on latest 1.3.2 has not changed.

@AGPX yes there was a bug in the swipe logic that caused it to only be triggered after your finger had been lifted from the screen the native behavior of swipe and what the swipe event was intended to do is trigger once the minimum distance requirement had been met.

@dgarlitt

Okay, I will take a look at the 1.4 alphas. Thanks.

@mfive

on 1.4. Alpha 2 i still have tremendous problems, i. e. scrolling a panel navigation down is even worse compared to 1.3.2. (!)..it stops completely and only works if used with a very slow finger swipe...

@jaspermdegroot
Collaborator

@mfive

It would be helpful if include info about the platform and device you tested on, as well as a test page. Thanks.

@mfive

thanx UgoMobi what a quick response. Sure:
Galaxy Nexus; Android 4.3; Native Browser; Here is my testsite which is a completely unmodified download from your server: http://m.hapetoys.com/jquery.mobile-1.4.0-alpha.2/demos/examples/
With my iPad mini it works fine.
When i scroll with my Nexus it stops somehow regularly after a few items scrolled, one time it freezed, but also sometimes the panels moves away again, without having choosen an item clearly...sometimes it works but only with very slow swipes. Right now it is more stable with the 1.3.2. version to be honest.

@jaspermdegroot
Collaborator

@mfive - Thanks!

Re-opening this ticket and added label "Android". We will test on Android 4.3.

@arschmitz
Owner

@uGoMobi i think this is the wrong ticket for this this. This issue is about the actual swipe event and this new issue is about panels it seems #6347 would be the more related issue

@jaspermdegroot
Collaborator

@arschmitz - You are right. Thanks!

@mfive - I am closing this ticket again in favor of #6347.

@mfive

ok sure thank you guys you are right

@jimox

Is this issue fixed? I have followed every link in this thread (including http://jsbin.com/uzaret/891) on my galaxy nexus using chrome and it only works about 50% of the time in every example (some of them even crashed my browser). Is there an example of this actually working?

@jaspermdegroot
Collaborator

@jimox

The links to latest code on branch master are changed so that page was using 1.3.2 stable instead.
Can you test with this updated version: http://jsbin.com/uzaret/951? You should see an alert on swipe.
Also, what Android version are you running on your Galaxy Nexus?
Thanks!

@jimox

@uGoMobi Thanks for the really quick reply. I just tried that page with 20 swypes. It registered 8 of them. I am running Android 4.2.2 and Chrome 30.0.1599.82. I did also test in the native browser and it works perfectly.

@jaspermdegroot
Collaborator

@jimox

Just tested on Chrome / Android 4.2.1 / Galaxy Nexus and I can confirm the issue.

I am re-opening this ticket, but changing the title because it's only about Chrome/Android. I also tested on Chrome / iOS7 / iPhone 5 and no issue there.

@jimox

@uGoMobi Thanks.

@jyohere

@uGoMobi : Please fix this issue in the release 1.4.0. Am facing so much trouble because of using JQM for swipe events.

@Shupal

tested on Chrome 30.0.1599.82 / Android 4.2.2 / S4 and the issue is still there. jQuery Mobile Version 1.3.2.
It's a little bit weird cause i have no swipe event at my site but at the jsbin demo site it works sometimes...
The swipe call is the same.
If you need more information just let me know :-)

@arschmitz
Owner

@Shupal can you please test with latest code not 1.3.2 many changes have been made with this event since then.

@Shupal

@arschmitz huh thaught 1.3.2 is the latest stable version? i tried 1.4.0-beta.1 but it has the same behaviour on chrome and android

E: okay after some searching i found this snip "e.stopImmediatePropagation();" and now it works better than before.

@sntran

I also tested with the page at http://jsbin.com/uzaret/951. My device is on Android 4.3

It is not 100% consistent. Sometimes a swipe will be missed and the next swipe shows the alert box twice.

@Etherion

Swipe seems to be inconsistent even in the latest dev version for me (Chrome 31.0.1650.59 / Android 4.4.2 / Nexus 4). Tried it on http://jsbin.com/uzaret/951 and http://view.jquerymobile.com/master/demos/panel/ , the swipe gesture is detected no more than 30% to 50% of the attempts with relatively identical gestures. I can see also the same issue in the Dolphin browser. The panel demo swipe to close works fine on Firefox on Android and on Safari on my old iPhone 3GS, also works fine on the native browser (non-chrome) on my collegues' htc one on Android 4.3

@zeusstl

I hate to say this, but this is too buggy to use in production and its one of the most crucial features of a mobile framework.
On a Google Nexus 4 with Android 4.4.2 the results are at best the 30% - 50% mentioned above but only when my fat fingers are hitting it just right.
Running some other experiments with extreme sensitivity values listed below seemed to improve the results so that I was able to get many successful swipes in a row when I was in the groove, but still averaged about 50% successful swipes overall.

    $(document).bind("mobileinit", function () {
        $.event.special.tap.tapholdThreshold = 10;
        $.event.special.swipe.horizontalDistanceThreshold = 3;
        $.event.special.swipe.verticalDistanceThreshold = 1000;
        $.event.special.swipe.durationThreshold = 4000;
        $.event.special.swipe.scrollSupressionThreshold = 1;
    });
@mirko77

It does not work at all on my Nexus 5 running 4.4.2. The panel only closes tapping on the part of the screen not covered by the panel.

@gabrielschulhof
Collaborator

http://view.jquerymobile.com/master/demos/panel-swipe-open/#demo-page works perfectly on Android 2.3.5 native browser.

@mirko77

Just tested with Chrome 31.0.1650.59 on Android KitKat and it very buggy. 30% success rate

@gabrielschulhof
Collaborator

I just tested with Android 4.1 and Chrome 31.0.1650.59 and it's also only about 60-70% reliable.

@mirko77

60/70% reliable on Android 4.2.2 Jelly Bean as well. Same Chrome build

@Janus1990

I've been testing on multiple mobile devices and browsers - all across different OS versions. Only Google Chrome ist very buggy as of ~33 % success rate on Android.

@konceptdesignstudio

about 50% reliable with Chrome 33.0.1750.132 on Android 4.2.2 on a Samsung Tab 10.1. Has someone opened a bug report with Chrome on this as well?

@Carlos487

I'm also having that issue. I use jquery mobile inside a phonegap app and the scroll is inconsistent in Android 4.4 KitKat, the events swipeleft and right are not recognized most of time. I'm using a Moto X with 4.4.2 the behavior is correct in older OS version. Maybe is a bug with the new Chromium Webview,

@arschmitz
Owner

Something is not consistent with the events that are fired in chrome vs the native browser is the problem. In kitkat chrome is that native browser. I am currently looking into what exactly is different to try and find a solution.

@greaterking

Was working on HTC v4.3 ...updated today...an gloriously fails. Swipe events no longer trigger from document body.

@vickykolte

jquery mobile panel features supported android version ?

@steeren

From what I can see swipeleft and swiperight are unreliable on Android devices. We don't have many android test devices I can put my hands on. An old ZTE on Android 2, a Nexus 5 and a Nexus 4 (both running KitKat) all exhibit the exact same behaviour. Swipe events are not being triggered reliably (maybe 1 out of 10). We've found that swiping really really fast get more results but its totally unusable.

We've noted this issue since 1.4.0, and again on 1.4.2.

Heres a barebones example using the WIP JQM
http://jsbin.com/ofuhaw/1262/edit

@SiamKreative

Tried http://jsbin.com/uzaret/891 on my Android 4.0.4 (i-mobile brand), native browser and it works 1 out of 10).

What is the most reliable alternative for swipe events?

@diegotorres50

Hello friends, coworkers and contributors for JQuery Mobile, I regret to say this, but We have the same problem related to swipe events, swipe is not working out fine for Samsung Galaxy S3, most of the attempts for doing swipe... swipe does not respond, sometimes is needed to do till 10 attempts to do swipe event responds.

A while a back, we've been developing a new WebApp project by using Jquery and Jquery Mobile, unfortunately we found out an erratic behavior that has to do with the coordinates when a displacement is done on axis "X" while a swipe event is given.

This behavior is gotten from built-in browser for Samsung Galaxy S3 (Android 4.3) but in especial when using Android 4.1.2 (Ice Cream Sandwich) on those devices.

As you are aware, the directive "horizontalDistanceThreshold​" has 30px as a value by default, and this is supposed is the minimum value expected during the horizontal displacement to be considered a swipe event, so far so good, said that, we were trying and getting the different values for debugging the swipe process on "$.event.special.swipe.handleSwipe" and we were able to detect several findings, among other things <> for axis "X" getting "start.coords[0]" and "stop.coords[0]" where "start" and "stop" are parameters used in "$.event.special.swipe.handleSwipe" function.

Why we say "wrong coordinates"? when you are using Samsung Galaxy S3, the window width is 360px, so, if you do a displacement breadthways on the screen, you should get at least more that 30px keeping in mind you dragged your finger through all your screen on axis "X", but this is not happening, the gotten average is 20px of displacement for axis "X" for all done proofs and this is given because of the range of coordinates on "X" between "start.coords[0]" and "stop.coords[0]" is low and not logic for a displacement so large.

By the time, we've decided to set "horizontalDistanceThreshold​" to 20px to get extreme sensitive and improve the results for Galaxy Samsung S3, however this is not a nice solution, in fact we think and we are concerned this change can be unstable for doing swipe on other devices.

Please, we need you to help us for getting a nice and stable solution.

We tested using:

*. built-in browser for Samsung Galaxy S3 (Android 4.1)
*. jquery-2.1.0.min.js
*. jquery.mobile-1.4.0.min.js

Besides we've read and we are aware of:

*. #5534 (Nothing seen here worked out for us)
(even its links and attached documentation)

*. http://view.jquerymobile.com/master/demos/swipe-page/buenosaires.html (no worked out for us)

*. https://code.google.com/p/android/issues/detail?id=19827

*. #6805

*. http://jsbin.com/uzaret/891

*. https://api.jquerymobile.com/swipe/

*. http://demos.jquerymobile.com/1.3.0-beta.1/docs/api/events.html

*. http://blog.pkrss.com/?p=1284

Please, give us a hand, what needs to be done to fix this issue on Samsung Galaxy S3 (Android 4.1 and 4.3)

Skype: diego.torres.campuzano
Twitter: diegotorres50
Gtalk: diegotorres50@gmail.com

Thanks so much for you attention.

Diego Torres
Bogota Colombia

@arschmitz
Owner

Sorry everyone about the delay in response to this. This has turned out to be a very complicated problem. The issue here is a change the team at google decided to make to how touchmoveevents are fired. Previously touchmove events were always fired while your finger was on the screen and moving. A change was made so that now on android or any version of chrome if you do not preventDefault() on the touchstart event or on the first touchmove event you will not continue to get touchmove events. However if you preventDefault on those events it will disable all scrolling.

This causes some very big problems for a swipe event. For example if you were to bind a swipe event to the body for navigation, and we were to make this work you would then no longer ever be able to scroll the page down or if you bind to a specific element any touch that start on that element will ever be able to start a scroll. This is not an acceptable result for us.

I have been working with the head of the team from google that implemented this change to attempt to find a solution. Chrome 35 beta gave great hope on this in fact swipe works 100% in chrome 35beta on android. In this version they made 2 important changes . First there is a "Slop" area around a touch which you can move within without triggering a scroll. In chrome 35 beta they have made it so movements in here will still trigger touchmove events for our purposes this worked perfectly and fixed the issue with swipe on android.

The second change is the addition of the touch-action css property. This allows you to specify the behavior of touch events on an element. This provides another possible fix for this issue by setting this prop to pan-y on the element which you bind swipe to it would allow vertical scrolling but not horizontal and would allow touch movements in the horizontal direction to still be triggered.

However with this good news there is also some bad news. After talking more with our contact at google the behavior that fixed the event ( emitting events in the slop area ) is being removed in the next build and will not make it into chrome 35 final. Apparently this behavior broke some popular sites and so it is being reverted in chrome.

So where does this leave us you may be asking?

I'm currently looking into one suggestion from google on this for making it work on current versions however it does not like this is going to work and even if it does its a significant change that would likely have to wait until 1.5. touch-action is promising here but will only be in new versions of chrome. It currently looks like we will not be able to support swipe on chrome or versions of android where this has been implemented.

We are working hard to find a solution to this issue and are open to suggestions but are limited by the behavior of the browser.

@chetan-AD

I'm facing the same issue, I am testing my App on Nexus5 Android 4.4. The swipe is very hard on kitkat 4.4(2/10) on all other versions its working perfectly. I read all the comments above but haven't found any proper solution. Any upgrade on how's the bug going

@bneigher

Anyone else notice a difference between the swipe performance on Webview vs Chromeview?

@diegotorres50

Thereafter We tried to use hammer.js to manage gestures, it seems to be a smart library by Jorik, however it is not a transversal solution given that some devices were showing random behaivors.

@TNT-RoX

Here is the fix, the problem is two fold.
The first is caused by different pixel densities and is solved:

horizontalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;


verticalDistanceThreshold = window.devicePixelRatio >= 2 ? 15 : 30;

The second fixes an issue with kitkat where a touchcancel is fired instead of a touchend. To identify if you are having this problem try tap->tap->swipe and it should fire the swipe event. This is resolved by attaching touchcancel to the touchend event.

@diegotorres50

Hi Andrew (TNT-RoX), We have found your feedback important, It seems a nice workaround to overcome this problem. We are going to test your first approach and looking forward to reach good results.

As for your second fix, sorry to bother you but it is not precise for us, Andrew, please, could you tell us what's wrong with kikat version related with swipe event? I think is very important to have clear what it is happening there.

Thanks again for your feedback and please keep in touch.

Greetings from Colombia

@diegotorres50

@TNT-RoX

Hi Diego, greetings from South Africa.

The swipe gestures on kitkat fail for a completely different reason to other versions of android.
On kitkat only if you do a swipe gesture the following sequence of events are fired.

  1. touchstart
  2. touchmove
  3. touchcancel (should be touchend)

Then if you tap once before a swipe the correct sequence of events are fired.

  1. touchstart
  2. touchmove
  3. touchend

So to overcome this kitkat bug I link the touchcancel to touchend for swipe events.

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

@TNT-Rox

@diegotorres50

Andrew @TNT-RoX We only have a unique way to describe your first fix... 'EUREKA', thanks so much Andrew, you nailed it!

We are working for the most important newspaper and mass media in Colombia, and our tester team has tried on all mobile devices (tablets and cells) including Blackberry, Windows Mobile, Nokia, Android, Iphone and many other and I am excited to say... your first workaround has solved the first problem and in fact this is the quote (spanish is written here) from tester team to share you:

"Asunto: Re: BUG: JQueryMobile Swipe Event Does Not Work Out For Samsung Galaxy S3 With Android ICS 4.1

Buen Día,

Realizamos las pruebas en los dispositivos móviles y tabletas, la conclusión es que la experiencia es mucho más fluida. Respecto al s3 que era donde se presentaban más inconvenientes se mejoró la experiencia, de tal forma que durante las pruebas realizadas no se tuvo que hacer el gesto más de una vez para navegar en el contenido.

(...)

Cordialmente,

Diana *************
Analista de pruebas
ISQTB - Certified Tester
CHOUCAIR TESTING S.A.
w.cairtesting..*



Bogotá - Colombia "

You are a genius, very smart of you to this fix...

On the other hand, we are going to review the second bug as for kit kat and We are going to keep you posted.

Are you on twitter? @diegotorres50 is my user.

See you around!

@diegotorres50

@TNT-RoX

Diego @diegotorres50 it seems a cleaner scaling solution would be:
horizontalDistanceThreshold = Math.round(30 / window.devicePixelRatio);
Regards

@diegotorres50

Wow @TNT-Rox that adjustment looks nice and cleaner as you said, I am going to make extensive this to testing team and so to check again, however last fix exposed is working out nice, thanks.

Regarding kitKat bug, We tried on by using Nexus 4 with Android 4.4.2, but We did not find irregular behaivor, so, Andrew, how do you like if We send you an URL where our webApp is public so that you can test that behaivor? Did you ever wonder if this kitKat bug is a isolated case?

Please, let's get together by private message to review it.

Regards

@diegotorres50

@arschmitz
Owner

@TNT-RoX I wish the fix were that simple. While you are correct we need to addtouchcancel, the rest of this does not fix the issue on kitkat at all. You can see where I made your changes in a branch http://view.jquerymobile.com/issue-5534/tests/functional/swipe.html. The issue is fully described here #5534 (comment) . We are working with the actual engineers from google on this, but so far the only solution is to wait for chrome 35 to go to stable, and once it does use touch-action.

@arschmitz
Owner

@TNT-RoX as for the pixel density issue this is something we are looking into in more depth. Thank you for the PR on this.

@diegotorres50

Hi @arschmitz please, keep us posted if adjustments are going to be done related with pixel density issue, I just may say that proposal solution by @TNT-RoX is working out fine by the time, Our testing team has done several testes with several mobile devices and swipe gesture is perfect now.

@arschmitz
Owner

@diegotorres50 The pixel density is only a potential issue about old android stock browser, this issue is about chrome, they are unrelated issues, however we are looking at both.

@marcsyp

Can this problem be avoided by using the targetSDK preference in Phonegap?

@Carlos487

Not the problem persist even if you use the 19 SDK or and older one like 17.

@jaspermdegroot jaspermdegroot added this to the 1.5.0 milestone
@mrextreme

After some testing I concluded that the main issue is swiping speed. I have to swipe REALLY fast to make it work. ( Different Samsung smartpones on Android, and latest stable Chrome. Firefox's sensitivity is perfect, the swipe works like a charm. )

@arschmitz
Owner

@mrextreme please see #5534 (comment) above for the the real issue here and a full explanation.

@TNT-RoX

@mrextreme @arschmitz is correct there is no direct fix for this issue.

@arschmitz
Owner

@TNT-RoX thanks for confirming this for everyone. Its something I have put a LOT of time and effort into and have worked directly with a member of the chrome team on this. Its not an answer I like but its just how it is :( Thankfully at least starting in chrome 35 which is stable now its a simple fix for most cases with the touch-action css prop. Also once the jQuery pointer events polyfill https://github.com/jquery/jquery-pointer-events is ready we will be switching to using that in place of our vmouse abstraction. This will allow us to implement this in a consistent cross platform way. There is a test implementation of this in the polymer branch https://github.com/jquery/jquery-mobile/tree/polymer this currently however does not support ie8 or 9 as this uses the polymer pointer events polyfill directly rather then the jQuery version. Once the jQuery version is ready this will move to master.

@TNT-RoX

My team of engineers and I have come up with a proof-of-concept shim that provides a workaround for this issue. https://github.com/TNT-RoX/android-swipe-shim

@marcsyp marcsyp referenced this issue in driftyco/ionic
Closed

Touch events not working in Android 4.4.2 #1729

@simonpapworth6742

Chrome 36 has resolved this issue for me, anybody else?

@arschmitz
Owner

@simonpapworth6742 yes they changed their thinking again on this. Talked with the head of web input at google a bit about this today and they are moving towards synchronous event processing in chrome for touch and scroll and have gone back on the idea of touch cancel. This fixes this problem in chrome.

@RByers

Note that prior to Chrome 36 the recommended way to address this problem is to check the direction of movement on the first touchmove event and decide based on that whether to call preventDefault(). I.e. if the touchstart->touchmove distance is primarily horizontal than preventDefault the touchmove to continue to get events and trigger a swipe. If it's primarily vertical then don't call preventDefault and you'll get scrolling instead. Many sites follow this pattern, and it's sometimes necessary on browsers other than just Chrome (eg. in Safari if horizontal scrolling is possible, and now in IE mobile if you're using touch events instead of pointer events, possibly also in Firefox).

In Chrome 36+ as you've discovered you can use 'touch-action: pan-y' to make this simpler (although you still have to be careful to handle events only in the horizontal direction). You may also get away with handling the events without calling preventDefault or using touch-action, but it's probably not going to do exactly what you want in all cases. Eg. try swiping horizontally then changing directions and moving vertically - once you've started handling the swipe you probably don't want to allow vertical scrolling anymore, right?

@arschmitz
Owner

@RByers we only support horizontal swipe. Scrolling during swipe in the vertical direction we really are ok with either way and would prefer to leave this up to the devs where possible since this is just a generic event like click. so if it should block scrolling or not would depend on the developers specific use case for the event. This is why the touchcancel event handling here was troublesome it forced us to pick scrolling vs swipe even when the desired effect had no need to block but may just be recording that the event occurred.

In general in apps made with jQuery mobile horizontal scrolling does not exist and would not be desirable this means that touch-action did fix this issue for the majority of situations. However the behavior in Chrome 36+ allows us to once again avoid making these decisions for the developers and just provide a generic event as we intended.

@RByers Thanks for sharing the background from the Chrome team!

@RByers

Great, that's exactly why I pushed on this change - I'm glad it has worked for you!

Note that most browsers still require you to make some choice between scrolling and event handling - eg. even in Chrome 36+ if active scrolling actually occurs (i.e. it is scrollable horizontally) we'll start throttling the touchmove events to ensure scrolling remains smooth. In Safari once scrolling has started you won't receive the touch events at all. But the key thing here is that in both cases it depends on scrolling actually occurring - if the page doesn't scroll horizontally then you'll get a reliable event stream.

FWIW I just wrote a demo of the simple scenario (where relying on preventDefault is OK) here: https://plus.sandbox.google.com/u/3/+RickByers/posts/Ad5wGCceU2e

@simonpapworth6742
@simonpapworth6742
@arschmitz arschmitz referenced this issue from a commit
@TNT-RoX TNT-RoX Swipe: Fix pixel density on android swipe event
Fixes swipe events for all pixel densities.
This is a partial fix for some swipe related issues.

Ref gh-5534
closes gh-7431
c299573
@dpa99c

It's nice that Chrome 36 fixed this, unfortunately there's a lot of old versions of Android out there with Webviews that contain this bug, so it still affects Cordova/Phonegap apps running on older devices.
I used Hammer.js to detect the swipe gestures as a workaround.

@mrextreme

or give Crosswalk a try

@dpa99c

Crosswalk's great but has its cons too: ~20Mb additional size on the APK and the need to build a separate package for x86 and ARM

@Carlos487

@dpa99c but i've tried hammer.js when the issue was reported and it didn't work... There is a new version with this fix?

@dpa99c

@Carlos487 I'm using v2.0.4 of hammer with Cordova 3.1.0 and JQM 1.4.5
Testing on Android 4.4.4 and iOS 8.3 and that seems to work fine

@Carlos487

@dpa99c I have a cordova 3.5 app with jquery mobile 1.3.2... I'm gonna try the new hammer.js thanks for the advice

@jackspaniel

Still seeing this problem with an up-to-date S5 (AT&T) running Android native browser and Android 4.4.2. Not surprisingly angular ng-swipe-left and ng-swipe-right are also effected.

I did notice a discrepancy in the user-agent strings between Chrome and Native Browser on this device:
Chrome: ...(HTML, Like Gecko) Chrome/43.0.2357.78...
Native Browser: ...(HTML, Like Gecko) Version 1.6 Chrome/28.0.1500.94...

So apparently an up-to-date S5 is running Chrome 28 as the rendering engine in it's default browser? Note that remote debugging in the native browser seems to have died when Android switched from Apple's rendering engine to Chrome.

Unfortunately S5 is the most popular Android out there and most people still use the big Internet button by default. So even though this is Google/Samsung's problem, it's our problem.

Can anyone give me a straightforward monkey patch to get some kind of swipe to work on the old Chrome rendering engine?

Edit: I see the ez-shim above by @TNT-RoX . I am going to try that.*

Edit edit: no dice. I can only get the "swipeLeft" and "swipeRight" events to fire (using test.html) on desktop chrome - but not on either the Native Browser or Chrome on the device referenced above. Seems like el.onscroll doesn't fire at all on those browsers on the test app.

@dahoo dahoo referenced this issue in Kadrian/beer-tinder-app
Closed

Fix animation on Nexus phones #2

@arschmitz
Owner

Want to give an update here that i have been talking to @jtangler the creator of hammer.js for about 6 months about the future of Hammer.js and interoperability with jQuery Mobile. I can now say that i have officially taken over Hammer.js and am leading this project as well jQuery Mobile and we are looking into completely replacing jQuery Mobiles gestures with Hammer.js we cant say any thing concrete on this yet but it is likely we will be going in this direction.

@jackspaniel

@arschmitz - do you have any idea if hammer.js horizontal swipe works better than jQuery Mobile or Angular swipe on Android native browser? I will give it a try on Monday when I have access.

@arschmitz
Owner

@jackspaniel yes i believe it does. It allows use of touch-action on platforms that don't support it like the android native browser. This makes it possible to make a proper swipe event.

@jackspaniel

Hmm. Well if this is what creating your own proper swipe event looks like, that might be a little out of scope for us on this project. ;) I tried hacking around with that to get it to work on the latest Android native browser, and there's some pretty intense calculations and synchronicity going on.

@kapilgarg1996 kapilgarg1996 referenced this issue from a commit in kapilgarg1996/jquery-mobile
@TNT-RoX TNT-RoX Swipe: Fix pixel density on android swipe event
Fixes swipe events for all pixel densities.
This is a partial fix for some swipe related issues.

Ref gh-5534
closes gh-7431
eb88cc9
@arschmitz arschmitz modified the milestone: 1.6.0, 1.5.0
@Oreqizer

Android 5.2 Galaxy S5, swipeleft works no problem, however, swiperight is buggy a lot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.