bug: ion-modal +presenting-element + initial-breakpoint + breakpoints causes scroll issue

[ozgurg]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

When swiping down from its handle, the ion-modal starts swiping from the bottom and doesn't respond to touch movements. This issue only occurs on mobile phone resolutions; when tested on desktop resolutions, everything works as expected. And if you open the modal on desktop resolution first and resize the browser to mobile resolution, everything works as expected as well.

mode = ios

https://github.com/ionic-team/ionic-framework/assets/6717356/1fd6b5a2-5285-421e-97ee-812f52afa210

mode = md

https://github.com/ionic-team/ionic-framework/assets/6717356/238114c6-0000-4b74-b3e8-1b552793c718

Expected Behavior

The ion-modal should swipe to close as normal.

Steps to Reproduce

1. Copy and paste the Card Modal example of the ion-modal component from the documentation: https://ionicframework.com/docs/api/modal#card-modal.
2. Set breakpoints to [0, 1] and initial-breakpoint to 1. (Values are not important for reproducing the issue according to my experience.)
3. Run the app and ensure the browser window size matches that of a mobile phone.
4. Open the ion-modal.
5. Try swiping down from its handle.
6. You will notice a strange scrolling issue. It appears to behave like a swipe but in reverse.

Code Reproduction URL

https://github.com/ozgurg/ionic-ion-modal-presenting-element-initial-breakpoint-breakpoints-issue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/ozgurg/.nvm/versions/node/v18.18.2/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.7.1

Capacitor:

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

Utility:

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

System:

NodeJS : v18.18.2 (/Users/ozgurg/.nvm/versions/node/v18.18.2/bin/node) npm : 9.8.1 OS : macOS Unknown

Additional Information

My reproduction code appears to be identical to the official Ionic blank starter, with the only modification being the replacement of the content in src/views/HomePage.vue with the Card Modal example from the Ionic documentation, along with the addition of breakpoints and initial-breakpoint attributes to test the issue. No other changes have been made.

[EinfachHans]

You are mixing Card and Sheet style modals here, which doesn't work.

• Setting presentingElement will make a modal to a card style modal
• Setting breakpoints and initialBreakpoint will make a modal to a sheet style modal

There is an open feature request to support presenting element for sheet style modals as well: #24068

[liamdebeasi]

As noted in https://github.com/ionic-team/ionic-framework/issues/29003#issuecomment-1936659104, this is due to us not supporting presentingElement with the sheet modal. You can follow https://github.com/ionic-team/ionic-framework/issues/24068 for updates on this behavior.

[ionitron-bot[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.