Skip to content

fix(overlays): tear down animations after dismiss - #28907

Merged
mapsandapps merged 7 commits into
mainfrom
FW-5682
Jan 31, 2024
Merged

fix(overlays): tear down animations after dismiss#28907
mapsandapps merged 7 commits into
mainfrom
FW-5682

Conversation

@mapsandapps

@mapsandapps mapsandapps commented Jan 29, 2024

Copy link
Copy Markdown
Contributor

Issue number: resolves #28352


What is the current behavior?

Not all animations are getting properly destroyed after they run. This means that styles can get stuck at the end value of their animation.

Specifically for this reproduction (as reported in the bug ticket), if the modal animates from 1 to 0 opacity and then the modal gets reopened with a different animation where the opacity should be 1 throughout (i.e. the opacity isn't supposed to animate at all), the modal is invisible because the opacity got stuck at 0 and never got reset to the default value of 1.

This bug is probably causing some incorrect behavior on other edge cases with overlays, but this is the only one I've identified.

Reproduction steps

Note: you cannot reproduce this when using a modalController

  1. Open a modal, e.g. this one in ios mode on a screen wider than 768px
  2. Close the modal
  3. Open the same modal on a screen narrower than 768px
  4. See that the modal does not appear

What is the new behavior?

  • Animations are properly destroyed after the animation completes
  • The modal now appears as expected after following the reproduction steps above

Does this introduce a breaking change?

  • Yes
  • No

@github-actions github-actions Bot added the package: core @ionic/core package label Jan 29, 2024
@mapsandapps
mapsandapps marked this pull request as ready for review January 30, 2024 15:56
@mapsandapps
mapsandapps requested a review from a team as a code owner January 30, 2024 15:56
@mapsandapps
mapsandapps requested review from liamdebeasi and removed request for a team January 30, 2024 15:56
Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated
Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated
Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated

@thetaPC thetaPC left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@sean-perkins sean-perkins left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fantastic work 👏

Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated
Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated
Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated
Comment thread core/src/components/modal/test/animations/modal.e2e.ts Outdated
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

@liamdebeasi liamdebeasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! I tested this in another app I was debugging, and it fixes one of the issues there as well.

@mapsandapps
mapsandapps added this pull request to the merge queue Jan 31, 2024
Merged via the queue into main with commit 950fa40 Jan 31, 2024
@mapsandapps
mapsandapps deleted the FW-5682 branch January 31, 2024 15:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: IonModal with presentingElement doesn't render on iOS

4 participants