Swipe is buggy on Chrome/Android

[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]

@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]

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.

On Sat, Jan 26, 2013 at 1:21 AM, Jasper de Groot notifications@github.comwrote:

@dzhongxu https://github.com/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 guidelineshttps://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md#issues .

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12733094.

[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]

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

On Sat, Jan 26, 2013 at 10:54 AM, Xu Zhong dzhongxu@gmail.com wrote:

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.

On Sat, Jan 26, 2013 at 1:21 AM, Jasper de Groot <notifications@github.com

wrote:

@dzhongxu https://github.com/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 guidelineshttps://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md#issues .

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12733094.

[jaspermdegroot]

@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]

I can still reproduce it in Android 2.3.0 Galaxy S3 and 2.3.6 Galaxy S1. On Sat, Jan 26, 2013 at 11:01 AM, Jasper de Groot notifications@github.comwrote:

@dzhongxu https://github.com/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?

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12740192.

[dzhongxu]

Sorry for Galaxy S3. It is Android 4.1.1.

On Sat, Jan 26, 2013 at 11:14 AM, Xu Zhong dzhongxu@gmail.com wrote:

I can still reproduce it in Android 2.3.0 Galaxy S3 and 2.3.6 Galaxy S1.

On Sat, Jan 26, 2013 at 11:01 AM, Jasper de Groot < notifications@github.com> wrote:

@dzhongxu https://github.com/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?

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12740192.

[jaspermdegroot]

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]

No. The swipe does not work in those two links, on Android S1 and Android S3.

On Sat, Jan 26, 2013 at 12:14 PM, Jasper de Groot notifications@github.comwrote:

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

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12741431.

[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]

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]

@jerone

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

[dzhongxu]

http://www.photoswipe.com/latest/examples/04-jquery-mobile.html#&ui-state=dialog

Swipe works on Galaxy S1, S3 and Note2.

On Sat, Jan 26, 2013 at 12:34 PM, Xu Zhong dzhongxu@gmail.com wrote:

No. The swipe does not work in those two links, on Android S1 and Android S3.

On Sat, Jan 26, 2013 at 12:14 PM, Jasper de Groot < notifications@github.com> wrote:

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

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12741431.

[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]

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]

After testing a couple of swipe apps. Even In old version, the swipe is buggy on Android. But they work on iPhone.

1.1.1 is buggy. Check this one: http://www.moretechtips.net/2012/07/building-web-presentations-using-jquery.html

The 1.2.0 is also buggy. Check this one: http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

On Sat, Jan 26, 2013 at 1:48 PM, Jasper de Groot notifications@github.comwrote:

Thanks again @jerone https://github.com/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.

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12742957.

[dzhongxu]

Hi Jerone,

Have you fixed the bug?

I met a difficulty to change the width of the panel. I simply set the width of the panel with css but it makes the panel always showing. Can you show me how to override the panel width with css?

Thanks a lot?

David

On Sat, Jan 26, 2013 at 1:48 PM, Jasper de Groot notifications@github.comwrote:

Thanks again @jerone https://github.com/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.

— Reply to this email directly or view it on GitHubhttps://github.com/jquery/jquery-mobile/issues/5534#issuecomment-12742957.

[arschmitz]

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

[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]

@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]

@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]

@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]

@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]

@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]

@mfive - Thanks!

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

[arschmitz]

@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 https://github.com/jquery/jquery-mobile/issues/6347 would be the more related issue

[jaspermdegroot]

@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]

@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]

@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]

@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.