bug: card modal content swipe with ion-nav behaves not smooth

[EinfachHans]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

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

Current Behavior

When using a ion-nav within a card modal and swiping down on the content it looks and feels weird because it moves the modal and scrolls the list at the same time

Expected Behavior

To not scroll the list if the modal is swiped down

Steps to Reproduce

See repo:

1. ionic capacitor build ios
2. run on ios device
3. open modal
4. forward to list page
5. swipe down on content

Code Reproduction URL

https://github.com/EinfachHans/ionic-card-modal-swipe-dismiss-issue

Ionic Info

Ionic:

Ionic CLI : 6.19.1 (/Users/hans/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.5
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.1
@capacitor/android : not installed
@capacitor/core : 3.5.1
@capacitor/ios : 3.5.1

Utility:

cordova-res (update available: 0.15.4) : 0.15.1
native-run : 1.6.0

System:

NodeJS : v16.14.2 (/Users/hans/.nvm/versions/node/v16.14.2/bin/node)
npm : 8.6.0
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. The problem here is we incorrectly assume that the content will remain consistent: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/gestures/swipe-to-close.ts#L17

When opening the card modal, we grab a reference to the ion-content in the root page. However, after pushing a view the ion-content that we are swiping on has changed. As a result, scrolling is not prevented on that new ion-content when we swipe.

[liamdebeasi]

Can you try the following dev build, and let me know if it resolves the issue?

npm install @ionic/angular@6.1.6-dev.11652813945.183e18c9

[EinfachHans]

@liamdebeasi works for me 😊

Another questions: What currently works is scrolling and if reached the top the modal dismissing starts within the same gesture. Can the other way around work as well? So when moving the modal to the top and when the top is reached start scrolling the content within the same gesture?

[liamdebeasi]

Sadly, no. Once we disable scrolling, the browser will not dispatch new scroll events while the gesture is still active (even if we remove overflow: hidden).

[liamdebeasi]

Thanks for the issue. This has been resolved via #25300, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.