Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: IonModal with presentingElement doesn't render on iOS #28352

Closed
oleksandr-danylchenko opened this issue Oct 12, 2023 · 4 comments · Fixed by #28907
Closed

bug: IonModal with presentingElement doesn't render on iOS #28352

oleksandr-danylchenko opened this issue Oct 12, 2023 · 4 comments · Fixed by #28907
Assignees
@mapsandapps
Labels
package: core @ionic/core package type: bug a confirmed bug report

Comments

@oleksandr-danylchenko
Copy link

oleksandr-danylchenko commented Oct 12, 2023 •
edited

Describe the Bug

When using the "Card modal" component, we noticed that it doesn't render its content after switching the viewport orientation back and forth:

Screen.Recording.2023-10-12.at.16.19.23.mov

Unfortunately, using the "Layers" tool I didn't notice any irregularities:
image
image

However, the issue doesn't happen if you rotate the device with the opened modal:

Screen.Recording.2023-10-12.at.18.41.19.mov

Or you don't open the modal in the horizontal view:

Screen.Recording.2023-10-12.at.18.42.43.mov

Moreover, the issue doesn't happen at all when the presentingElement is removed from the IonModal, thus removing the "Card effect":
image

Screen.Recording.2023-10-12.at.18.57.17.mov

Expected Behavior

The modal is consistently opened and rendered both in the vertical and horizontal modes. Prior openings of the modal shouldn't impact its rendering in the following ones. In short: should work like in the docs and demos 👌🏻

Steps to Reproduce

This bug can be reproduced using the official "Card Modal" example:

  1. Open the example in Stackblitz
  2. Open the preview in a new tab
  3. Enable mobile view testing
  4. Choose an iPhone device
  5. Vertical Open -> Close
  6. Rotate the view
  7. Horizontal Open -> Close
  8. Rotate the view
  9. Vertical Open

Then you'll see that the modal's content isn't rendered.

The issue happens not only on the Web but on real iOS devices as well.

Operating System

Macbook Pro, M1 2021, MacOS Sonoma 14.0

Browser

Chrome

Version

117.0.5938.149
@amandaejohnston amandaejohnston transferred this issue from ionic-team/ionic-docs Oct 13, 2023
@mapsandapps mapsandapps self-assigned this Nov 30, 2023
@mapsandapps
Copy link
Contributor

Thank you for the bug report. I can reproduce this and can confirm that this is a bug in Ionic Framework. The opacity is not getting properly set in some cases when the modal opens.

@mapsandapps mapsandapps added package: core @ionic/core package type: bug a confirmed bug report labels Dec 4, 2023
@ionitron-bot ionitron-bot bot removed the triage label Dec 4, 2023
@liamdebeasi liamdebeasi mentioned this issue Jan 29, 2024
Closed
3 tasks
@mapsandapps mapsandapps mentioned this issue Jan 30, 2024
Merged
2 tasks
github-merge-queue bot pushed a commit that referenced this issue Jan 31, 2024
@mapsandapps @liamdebeasi
fix(overlays): tear down animations after dismiss (#28907)
950fa40 
Issue number: resolves #28352

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
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](http://localhost:3333/src/components/modal/test/card-nav?ionic:mode=ios)
in `ios` mode on a screen wider than 768px
1. Close the modal
1. Open the same modal on a screen narrower than 768px
1. See that the modal does not appear

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- 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
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->

<!-- 
## Other information

Any other information that is important to this PR such as screenshots
of how the component looks before and after the change. -->

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
@mapsandapps
Copy link
Contributor

Thank you for your bug report! The bug has been resolved in #28907 and will be released in an upcoming version of Ionic Framework.

Here is a dev build if you would like to test the fix: 7.6.8-dev.11706715287.1950fa40

@oleksandr-danylchenko
Copy link
Author

Thank you so much for picking this bug up!

@ionitron-bot Ionitron Bot
Copy link

ionitron-bot bot commented Mar 1, 2024

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Mar 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@mapsandapps mapsandapps

Labels
package: core @ionic/core package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(overlays): tear down animations after dismiss ionic-team/ionic-framework
3 participants
@sean-perkins @mapsandapps @oleksandr-danylchenko