bug: sheet modal backdrop does not fade in at correct point

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

Hey there,

i’m still testing the sheet style modal a lot 😊 Here is some more stuff that i mentioned when using the sheet style modal together with backdropBreakpoint (Code Repo added). I want to create a Sheet Style Modal that works with a Page (in the Repo Page second):

• When using Breakpoints like [breakpoints]="[0.3, 1]" i have to define a backdropBreakpoint small higher than 0.3 to make it work, because 0.3 already displays the breakpoint. I find it kinda ugly to define it like 0.31, so maybe the provided value should be seen as excluded?

• With the current setup it looks like the backdrop is started not directly when scrolling up, it looks like it started on the 13 in the list which is quite high:

• In such a scenario the content isn’t completely visible, as the drawer is above it. Should i add a padding-bootom myself or should it be added automatically

• Also it would be better if in this case the modal wouldn’t be possible to be dragged under the bottom breakpoint, control-able via a new prop?

• When closing the second page the modal is not destroyed. Of course i can do this by a hook, but i think it should be automatically including in the gesture. So if you swipe back the back the modal should close automatically with the gesture?

Expected Behavior

Described above

Steps to Reproduce

Simply run the provided repo 😃

Code Reproduction URL

https://github.com/EinfachHans/sheet-modal-backdrop-breakpoint

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. There are 5 issues here:

1. Given a backdropBreakpoint of 0.3 it looks like the backdrop only begins to fade in once the animation hits ~70% completion.

I can reproduce and will look into a fix.

2. The backdropBreakpoint property is inclusive, so you need to set the value to 0.31 if you want underlying content to be interactive at an offset of 0.3.

I can discuss with the team about making backdropBreakpoint exclusive instead of inclusive.

3. Navigating away from a page via a swipe gesture does not automatically dismiss a sheet modal that lets you interact with the page underneath it.

The modal is a global component that overlays your entire application, so I do not think the modal should be tightly coupled with page routing lifecycles. The sheet modal is primarily intended for single page views (such as a map view), so if you are interested in making the modal dismiss when you navigate away I recommend dismissing the modal in an ionViewWillLeave hook. One note is that the hardware back button on Android will dismiss overlays, so this behavior does not happen when using the hardware back button.

4. The sheet modal should not be draggable underneath the minimum breakpoint.

I think that would be a great addition to https://github.com/ionic-team/ionic-framework/issues/22120, so I will track progress there.

5. The content underneath the modal is partially blocked by the modal.

Similar to issue 3, the modal is a global component that overlays your entire application, so it is supposed to partially block the content underneath it (see the Apple Maps app on iOS for an example of a native application that does this). If you want the underlying content to be fully visible you can add padding-bottom to your ion-content.

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