fix(modal): backdrop animation when backdropBreakpoint is 1

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

When the backdropBreakpoint on a sheet modal is 1, the calculation for the opacity keyframe animation will return an invalid result (NaN). This is due to the calculation evaluating to x * Infinity + -Infinity.

Issue URL: #25402

What is the new behavior?

• Returns a backdrop value of 0 when the backdrop breakpoint is 1 (since the backdrop is invisible)
• Backdrop animation does not flicker solid black when using backdropBreakpoint of 1 on a sheet modal and performing a dismiss swipe gesture

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.1.10-dev.11654886605.11e4eab6 🟨

[averyjohnston]

This causes the animation to flicker with an off-center backdrop breakpoint, e.g. a modal with this config: { backdropBreakpoint: 0.3, initialBreakpoint: 0.3, breakpoints: [0.3, 0.5, 0.7, 1] } (You can see this with the "Backdrop breakpoint is off-center" button in the sheet test -- screencast.) If I log the slope for that config, it's about 1.4 without the Math.min applied.

[liamdebeasi]

Fixing this should be a matter of returning 0 early when backdropBreakpoint === 1.

When backdropBreakpoint is 1 you are dividing by zero here:

const slope = 1 / (1 - backdropBreakpoint);

This results in the bug reported in the issue thread.

[liamdebeasi]

Alternatively, I think what Sean was trying to do was this:

const slope = 1 / (Math.min(1, 1 - backdropBreakpoint));

Might be worth trying that too.

[sean-perkins]

Updated to check if the backdropBreakpoint is 1 and returning a value of 0 in that example. This resolves the flickering effect for the reported issue and maintains the expected transition behavior for the example values that Amanda provided.

I did experiment with the Math.min change, but that continued to produce irregular transitions of the backdrop with the values of Amanda's example.

New dev-build posted: 6.1.10-dev.11654886605.11e4eab6

[averyjohnston]

Looks great to me now 👍