bug: sheet modal scrolling should work like native

[EinfachHans]

Prequisites

• 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

Current Behavior

It's about the new Sheet style modal:

When i have a modal with for example breakpoints: [0.3, 1]; initialBreakpoint: 0.1 and a content that contains a list that is larger to be displayed on the first breakpoint and i try to scroll, the modal drags up like it should. But when reached the top breakpoint it should automatically start controlling the modal content when i continue to move my finger up.

Also the way down isn't working. When the modal is at the top position and i'm scrolling the list back up, the modal itself should be dragged down as soon as the modal content is back at its initial position.

Expected Behavior

Described above 😊

Steps to Reproduce

• Run the Ionic Core Projekt
• Run the whole thing on device via ngrok
• Navigate to the Modal Sheet Tests

Tested on iOS 14.7.1 (iPhone 12 Pro)

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue! We had the same thought with the card modal as well, but unfortunately this is not something that we can add. The main issue here is that when translating the modal we need to block scrolling otherwise the content will scroll as the modal moves. Even if we re-enable scrolling mid-gesture, the browser still will not dispatch new scroll events until the next gesture starts on the screen. Calling event.preventDefault() instead of setting overflow provides the same experience too.

Similarly with the second issue noted here, we do not know which way the user is going to scroll until they have scrolled a few pixels. If we added this behavior on the way down, you would get a similar behavior where the modal translates down and the content is rubber banding.

As much as we would like to add this behavior, the way browsers handle scroll dispatching does not make this possible at the moment.

[EinfachHans]

Okay understand 🤷🏼‍♂️ Thanks for the detailed answer

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