question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: sheet modal backdrop animation is incorrect when backdropBreakpoint is 1

See original GitHub issue

Prerequisites

Ionic Framework Version

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

Current Behavior

When using a Sheet Style Modal with backdropBreakpoint: 1 the backdrop is buggy when the modal snaps back:

Expected Behavior

The backdrop should not be shown here of course

Steps to Reproduce

See attached Repo. Just drag the sheet down and release it

Code Reproduction URL

https://github.com/EinfachHans/ionic-sheet-modal-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.8 @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 : not installed

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
EinfachHanscommented, Jun 8, 2022

@sean-perkins works 😊

1reaction
sean-perkinscommented, Jun 7, 2022

Thanks for the added detail! Can you test with this dev-build and let me know if the problem is resolved:

6.1.9-dev.11654617845.1b4d9725

Our calculation for the animation was evaluating to NaN, since 1 / 1 - backdropBreakpoint becomes Infinity.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-modal: Ionic Mobile App Custom Modal API Component
Sheet modals allow users to interact with content behind the modal when the backdropBreakpoint property is used. The backdrop will be disabled up...
Read more >
Bootstrap Modal sitting behind backdrop - Stack Overflow
A better workaround for me is to bind to the shown event (once the page is loaded) and to correct the z-index property....
Read more >
Modal · Bootstrap v5.1
Modals are built with HTML, CSS, and JavaScript. · Clicking on the modal “backdrop” will automatically close the modal. · Bootstrap only supports...
Read more >
5 Examples of the new Ionic 6 Bottom Sheet Modal
The breakpoints value is an array of values between 0 and 1, and defines at which percentage of your screen the modal snaps...
Read more >
Modal | Components - BootstrapVue
<b-modal> supports close on ESC (enabled by default), close on backdrop click (enabled by default), and the X close button in the header...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found