search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.89k stars 13.52k forks source link

bug: item-sliding animation jumps when using multi touch #29085

Open aeharding opened 6 months ago

aeharding commented 6 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

When multiple fingers are on the screen and move around, the ion-item-sliding tries to listen to both touches. This causes glitchy behavior.

I found this out while testing certain iOS accessibility features (3-finger zoom), discovering that ion-item-sliding can conflict with that.

Expected Behavior

ion-item-sliding should only activate if there is one finger on the screen.

This is how the iOS Mail app works - the sliding items only activates when there is one finger on the screen. This prevents conflict with other gestures.

Additionally, if the native sliding item is already activated and another finger is placed on the screen, it does not glitch.

Steps to Reproduce

  1. Place two or more fingers on any ion-item-sliding.
  2. Try moving them around.
  3. Observe glitches

Code Reproduction URL

https://github.com/aeharding/sliding-multi

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.7.3

Capacitor:

Capacitor CLI : 5.7.0 @capacitor/android : 5.7.0 @capacitor/core : 5.7.0 @capacitor/ios : 5.7.0

Utility:

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

System:

NodeJS : v20.8.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/bin/node) npm : 10.1.0 OS : macOS Unknown

Additional Information

This may be related to #21136.

https://github.com/ionic-team/ionic-framework/assets/2166114/0a4a54e1-2223-4191-b4fa-d1f2361b4a18

thetaPC commented 6 months ago

Thank you for submitting the issue!

I have confirmed that iOS Mail only triggers the swipe animation with one finger press. Unfortunately, Ionic Framework is not built to handle multiple finger press and it will most likely be awhile until we can handle it.

There is a feature request that is tracking this detection. I recommend giving it a thumbs up to add your vote.