question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: scroll assist calls stopPropagation which can cause swipe to go back to break

See original GitHub issue

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • Nightly

Current Behavior

Swiping right on a form with ion-input and ion-label that has position stacked or floating sometimes causes the app to get stuck between two pages.

https://user-images.githubusercontent.com/104857648/166508595-324b1156-b862-4917-8869-f07e0e742cb1.MP4

Expected Behavior

  • If the user performs a “full swipe” the user get routed to the previous page.
  • If the user aborts the swipe he/she stays on the page.
  • In neither case the user is stuck between two pages.

Steps to Reproduce

  1. Create an ion-content containing multiple ion-items with ion-label and ion-input. The ion-labels must have position="stacked" or position="floating".
  2. Put it on a page where you can swipe to get back to a previous page.
  3. Click into an ion-input
  4. Swipe right fast from the middle of the screen while the ion-input have focus. Sometimes this has to be done multiple times before the bug appears.

It happens when swiping from the left of the screen or even scrolling fast too (probably slightly swiping right) but not as frequently and thus harder to reproduce.

Code Reproduction URL

https://github.com/colmunel/test

Ionic Info

Ionic:

Ionic CLI: 6.18.2 Ionic Framework: @ionic/angular 5.8.5 @angular-devkit/build-angular: 0.1101.4 @angular-devkit/schematics: 9.1.15 @angular/cli: 11.1.4 @ionic/angular-toolkit: 2.3.3

Capacitor:

Capacitor CLI: 3.2.5 @capacitor/android: 3.3.2 @capacitor/core: 3.2.5 @capacitor/ios: 3.3.2

Utility:

cordova-res: not installed globally native-run: 1.5.0

System:

NodeJS: v14.19.0 npm: 6.14.15 OS: Windows 10

Additional Information

Bug appeared on iOS. Not tested on Android.

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:18 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
colmunelcommented, May 13, 2022

Ok! Thanks for all the help, much appreciated!

1reaction
colmunelcommented, May 13, 2022

It seems to work in v.6 yes. Will it be fixed in v.5 as well?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Any way to prevent horizontal scrolling triggering swipe back ...
You can do this by listening to the mousewheel event on the element. Using the scroll properties of the element and the deltaX/Y...
Read more >
Scroll Bouncing On Your Websites - Smashing Magazine
This article describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different ...
Read more >
Sites incorrectly disabling scrolling with touch-action: none
We've got a potentially serious issue with touch-action I'd like people's input on: Several sites (about 6 known companies) are using a common...
Read more >
Multi-touch interaction - Web APIs - MDN Web Docs - Mozilla
The touch event interfaces support application-specific single and multi-touch ... 1-finger swipe, and 2-finger move/pinch/swipe.
Read more >
react-swipeable - npm
This prop prevents scroll during swipe in most cases. Use this to stop scrolling in the browser while a user swipes. Swipeable will...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found