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

Scrolling up and down causes swipe event #2328

Closed
jostster opened this Issue Aug 23, 2011 · 18 comments

Comments

Projects
None yet
9 participants
@jostster

jostster commented Aug 23, 2011

Scrolling in a list up or down with your finger slightly moving left or right will cause a swipe event. Use of this is if a user is using one hand to hold the mobile device then use the thumb to scroll you are going to get an arch motion.

May a check should be put in play to check the x vs y to see if it is more of a swipe motion or scroll motion.

I am using 1.0b2 and had to disable swipes because of this issue. We tested both iOS and Android and duplicated the issue several times on both devices.

Possibly related to #341

@begmandev

This comment has been minimized.

Show comment
Hide comment
@begmandev

begmandev Aug 24, 2011

Why don't you configure your swipe thresholds to be less sensitive as documented in the Beta 2 announcement? I changed this in my own application and the swipe left/right sensitivity is much better once the threshold values were increased.

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
7b1966c

begmandev commented Aug 24, 2011

Why don't you configure your swipe thresholds to be less sensitive as documented in the Beta 2 announcement? I changed this in my own application and the swipe left/right sensitivity is much better once the threshold values were increased.

http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
7b1966c

@jostster

This comment has been minimized.

Show comment
Hide comment
@jostster

jostster Aug 24, 2011

That could possibly be a temp fix but you shouldn't have to increase threshold. A fix should be put into place to actually determine if the intended swipe was more of a vertical swipe or horizontal swipe. I shouldn't have to set the threshold to my entire screen. If I only wanted to use 10px to use swipes I should be able to use those 10 pixels instead of having to set my threshold to 75.

Many people use just a small portion of their screen to do the swipe events if they are using one hand to hold the phone and do the swipes. Setting the threshold to higher will cause issues for people that only use a small portion of the screen.

jostster commented Aug 24, 2011

That could possibly be a temp fix but you shouldn't have to increase threshold. A fix should be put into place to actually determine if the intended swipe was more of a vertical swipe or horizontal swipe. I shouldn't have to set the threshold to my entire screen. If I only wanted to use 10px to use swipes I should be able to use those 10 pixels instead of having to set my threshold to 75.

Many people use just a small portion of their screen to do the swipe events if they are using one hand to hold the phone and do the swipes. Setting the threshold to higher will cause issues for people that only use a small portion of the screen.

@begmandev

This comment has been minimized.

Show comment
Hide comment
@begmandev

begmandev Aug 24, 2011

So, then set your vertical threshold to a lower value. All applications aren't going to be the same so I hope a "fix" isn't put in that works better just for one use case. That's what's nice about the current event threshold configuration, you can adjust it to fit the needs of your application without forcing everyone else to fit the same use cases.

begmandev commented Aug 24, 2011

So, then set your vertical threshold to a lower value. All applications aren't going to be the same so I hope a "fix" isn't put in that works better just for one use case. That's what's nice about the current event threshold configuration, you can adjust it to fit the needs of your application without forcing everyone else to fit the same use cases.

@jostster

This comment has been minimized.

Show comment
Hide comment
@jostster

jostster Aug 24, 2011

Its not just a one use case. A check needs to be put into place to determine if it indeed is a vertical swipe or a side swipe. If I have 2 sections in my app, one large and one small and I need to detect swipes inside them it setting the global preferences for the threshold will not work. Setting my threshold high for the large section will make my small section not register the swipes. Setting my swipes small for the small section will cause my large section to register incorrect events should a user add a little horizontal swipe to their vertical swipe (IE: using one hand to hold the phone and using the thumb to do swipe / gestures). Adding a check to see if the x.start - x.stop are larger than y.start - y.stop then we know its more of an x swipe than y and vise versa.

jostster commented Aug 24, 2011

Its not just a one use case. A check needs to be put into place to determine if it indeed is a vertical swipe or a side swipe. If I have 2 sections in my app, one large and one small and I need to detect swipes inside them it setting the global preferences for the threshold will not work. Setting my threshold high for the large section will make my small section not register the swipes. Setting my swipes small for the small section will cause my large section to register incorrect events should a user add a little horizontal swipe to their vertical swipe (IE: using one hand to hold the phone and using the thumb to do swipe / gestures). Adding a check to see if the x.start - x.stop are larger than y.start - y.stop then we know its more of an x swipe than y and vise versa.

@ghost ghost assigned jblas Sep 5, 2011

@moll

This comment has been minimized.

Show comment
Hide comment
@moll

moll Jan 7, 2012

Contributor

I don't think this thing is entirely fixable by better thresholds. The thing is also, when a user scrolls, the start coordinates also move. That means when you do a fast arc up and down, start and end coordinates end up looking like you swiped horizontal.

Maybe we should take both scrolling and the angle into account.

Contributor

moll commented Jan 7, 2012

I don't think this thing is entirely fixable by better thresholds. The thing is also, when a user scrolls, the start coordinates also move. That means when you do a fast arc up and down, start and end coordinates end up looking like you swiped horizontal.

Maybe we should take both scrolling and the angle into account.

@moll

This comment has been minimized.

Show comment
Hide comment
@moll

moll Jan 7, 2012

Contributor

Changing coords to use clientXY instead of pageXY seems to fix the latter problem of scrolling up and to the side being considered a swipe.

Contributor

moll commented Jan 7, 2012

Changing coords to use clientXY instead of pageXY seems to fix the latter problem of scrolling up and to the side being considered a swipe.

@moll

This comment has been minimized.

Show comment
Hide comment
@moll

moll Jan 7, 2012

Contributor

My comment on using clientXY was premature. Based on a simple test I did with the iOS 4.3.3 simulator, all pageY, screenY and clientY report values relative to <body>. So when scrolling a long page vertically, they remain roughly the same.

Maybe we'd need to track scrolltop, too, to short-circuit the swipe when it's really a scroll.

Update: iOS 5.0.1 seems to report ev.clientY relative to the actual screen. Ev.pageY and ev.screenY are still equal.

Contributor

moll commented Jan 7, 2012

My comment on using clientXY was premature. Based on a simple test I did with the iOS 4.3.3 simulator, all pageY, screenY and clientY report values relative to <body>. So when scrolling a long page vertically, they remain roughly the same.

Maybe we'd need to track scrolltop, too, to short-circuit the swipe when it's really a scroll.

Update: iOS 5.0.1 seems to report ev.clientY relative to the actual screen. Ev.pageY and ev.screenY are still equal.

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot May 28, 2012

Member

related issue #3823

Update: actually not only related, but the same so I closed that one as duplicate.

Member

jaspermdegroot commented May 28, 2012

related issue #3823

Update: actually not only related, but the same so I closed that one as duplicate.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost May 30, 2012

Touch scrolling (really touch drag scrolling) means having the content move on the screen along with your finger; so there is little relative vertical movement between your finger and the content, even if you have dragged your finger up or down more than half the screen.

To fix this issue, I added scrollTop tracking to the swipe event. The pending pull request is here: #4478

ghost commented May 30, 2012

Touch scrolling (really touch drag scrolling) means having the content move on the screen along with your finger; so there is little relative vertical movement between your finger and the content, even if you have dragged your finger up or down more than half the screen.

To fix this issue, I added scrollTop tracking to the swipe event. The pending pull request is here: #4478

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 17, 2012

Member

@ghost

We have tested this with this test page: http://goo.gl/irGhT

On Android there were no issues with a swipe event being triggered while (touch drag) scrolling. The problem seems to only occur on iOS.

Member

jaspermdegroot commented Sep 17, 2012

@ghost

We have tested this with this test page: http://goo.gl/irGhT

On Android there were no issues with a swipe event being triggered while (touch drag) scrolling. The problem seems to only occur on iOS.

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Sep 17, 2012

Contributor

Wondering if this could be adjusted by increasing the thresholds a bit?

Contributor

toddparker commented Sep 17, 2012

Wondering if this could be adjusted by increasing the thresholds a bit?

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Nov 26, 2012

Member

After some research and discussion with @toddparker we are going to fix this by making some of the calculations available to modify to add your own swipe left right behavior like using scrolltop for calculation as mentioned above.

Member

arschmitz commented Nov 26, 2012

After some research and discussion with @toddparker we are going to fix this by making some of the calculations available to modify to add your own swipe left right behavior like using scrolltop for calculation as mentioned above.

@arschmitz arschmitz closed this in 02f332b Dec 5, 2012

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Dec 5, 2012

Member

The swipe event can now be extended to add your own custom behavior or or added swipe directions like up and down. This will be in 1.3 you can see an example extension at https://github.com/arschmitz/JQM-Swipefix this extension will fix this issue on iOS.

Member

arschmitz commented Dec 5, 2012

The swipe event can now be extended to add your own custom behavior or or added swipe directions like up and down. This will be in 1.3 you can see an example extension at https://github.com/arschmitz/JQM-Swipefix this extension will fix this issue on iOS.

@MorrisJohns

This comment has been minimized.

Show comment
Hide comment
@MorrisJohns

MorrisJohns Feb 8, 2013

Cross references: if a better solution found, could also update http://forum.jquery.com/topic/scroll-issue-on-swipe-elements and http://stackoverflow.com/questions/11290771/swipeleft-swiperight-triggered-during-vertical-scroll-in-jquery-mobile

Information only: Documentation says: "On iOS no vertical distance takes place in the touch events while scrolling. This means that the verticalDistanceThreshold specified for the swipe event is ignored. The only way we have found to work around this is to calculate scrollTop on every touchstart / touchend which is very expensive. It is for this reason we have made the swipe event extendable so you can add this in if the performance is acceptable for your use."

MorrisJohns commented Feb 8, 2013

Cross references: if a better solution found, could also update http://forum.jquery.com/topic/scroll-issue-on-swipe-elements and http://stackoverflow.com/questions/11290771/swipeleft-swiperight-triggered-during-vertical-scroll-in-jquery-mobile

Information only: Documentation says: "On iOS no vertical distance takes place in the touch events while scrolling. This means that the verticalDistanceThreshold specified for the swipe event is ignored. The only way we have found to work around this is to calculate scrollTop on every touchstart / touchend which is very expensive. It is for this reason we have made the swipe event extendable so you can add this in if the performance is acceptable for your use."

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Feb 8, 2013

Member

@toddparker @arschmitz

How did we want to include that swipe fix? In the demos?

Member

jaspermdegroot commented Feb 8, 2013

@toddparker @arschmitz

How did we want to include that swipe fix? In the demos?

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Feb 8, 2013

Contributor

Yep, demo

Contributor

toddparker commented Feb 8, 2013

Yep, demo

@marcuskrahl

This comment has been minimized.

Show comment
Hide comment
@marcuskrahl

marcuskrahl May 13, 2013

Contributor

Is there a reason for not using screenX/screenY instead of pageX/pageY? There is still an issue in Firefox for Android where a vertical scroll is recognized as a swipe.

However using screenX/screenY fixes the issue and also works in all the browsers I tested (Firefox, Chrome for Android, Default Android Browser, Safari for iOS 6.0). Maybe you should use screenX/screenY whenever possible and fall back to pageX/pageY for older browsers.

See http://jsbin.com/uzedeq/15/edit for an example of the issue. In Firefox for Android a swipe is detected although the page is just scrolled. The best way to reproduce this issue seems to be to scroll with a lot of acceleration (like when you are at the bottom of the page and need to get back to the top).

If you do not want to change the default handler maybe at least add a hint to the docs.

Contributor

marcuskrahl commented May 13, 2013

Is there a reason for not using screenX/screenY instead of pageX/pageY? There is still an issue in Firefox for Android where a vertical scroll is recognized as a swipe.

However using screenX/screenY fixes the issue and also works in all the browsers I tested (Firefox, Chrome for Android, Default Android Browser, Safari for iOS 6.0). Maybe you should use screenX/screenY whenever possible and fall back to pageX/pageY for older browsers.

See http://jsbin.com/uzedeq/15/edit for an example of the issue. In Firefox for Android a swipe is detected although the page is just scrolled. The best way to reproduce this issue seems to be to scroll with a lot of acceleration (like when you are at the bottom of the page and need to get back to the top).

If you do not want to change the default handler maybe at least add a hint to the docs.

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz May 13, 2013

Member

@mk747gx Thank you for your efforts on this however screenx/screeny reports the same results in this case and does not fix or improve the issue. tested this morning on ios5/ios6, chrome for ios, and android

Member

arschmitz commented May 13, 2013

@mk747gx Thank you for your efforts on this however screenx/screeny reports the same results in this case and does not fix or improve the issue. tested this morning on ios5/ios6, chrome for ios, and android

@marcuskrahl

This comment has been minimized.

Show comment
Hide comment
@marcuskrahl

marcuskrahl May 13, 2013

Contributor

But it certainly does fix the issue in Firefox for Android. When scrolling pageY stays the same while screenY reports the correct value.

Contributor

marcuskrahl commented May 13, 2013

But it certainly does fix the issue in Firefox for Android. When scrolling pageY stays the same while screenY reports the correct value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment