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.

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

bug: Modal with option animated: false does not display on iOS #19285

Closed
rossholdway opened this issue Sep 6, 2019 · 3 comments

Comments

@rossholdway
Copy link
Contributor

commented Sep 6, 2019

Bug Report

Ionic version:

[x] 4.x

Current behavior:
On the latest version of Ionic v4.9.0, create a modal with the config option animated: false. The modal will not display on iOS Safari / WKWebview / Capacitor, but will in other browsers.

Expected behavior:
I would expect the modal to display without any animation.

Steps to reproduce:
On master open the ion-modal basic test and add animated: false to the createModal function. Open the test URL http://localhost:3333/src/components/modal/test/basic in Safari on IOS (a simulator works - iOS 12.2 or 13). Click "Present Modal". The modal will be inserted into the DOM, but won't display :(

From initial investigation...
The .modal-wrapper on iOS seems to have a translate3d(0,100%,0) transform on it to prevent flickering

@include transform(translate3d(0, 100%, 0));

When you disable the animation with 0ms

animation.duration(0);
on iOS Safari it takes the translate3d into account, causing the modal to be hidden off screen.

Related code:

const modal = await this.modalController.create({
  component: Tab2Page,
  animated: false
});
await modal.present()
@ionitron-bot ionitron-bot bot added the triage label Sep 6, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 6, 2019

Thanks for the issue. Can you give the following dev build a try and let me know if it resolves your issue?

If using Ionic Angular: npm i @ionic/angular@4.10.0-dev.201909061209.c959d75
If using Ionic Core: npm i @ionic/core@4.10.0-dev.201909061209.c959d75

Thanks!

@ionitron-bot ionitron-bot bot removed the triage label Sep 6, 2019
@rossholdway

This comment has been minimized.

Copy link
Contributor Author

commented Sep 6, 2019

@liamdebeasi Thanks! That fixes it 👍

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Sep 6, 2019
@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Sep 6, 2019
@ionitron-bot ionitron-bot bot removed the triage label Sep 6, 2019
@liamdebeasi liamdebeasi moved this from Backlog 🤖 to In progress 🤺 in Ionic Core Sep 6, 2019
Ionic Core automation moved this from In progress 🤺 to Done 🎉 Sep 10, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

Thanks for the issue. This issue has been fixed via #19287 and will be available in the next release of Ionic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Ionic Core
  
Done 🎉
2 participants
You can’t perform that action at this time.