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: @ionic/vue uses page transitions for Android, but not for iOS #19042

Closed
hunterloftis opened this issue Aug 8, 2019 · 5 comments
Closed

bug: @ionic/vue uses page transitions for Android, but not for iOS #19042

hunterloftis opened this issue Aug 8, 2019 · 5 comments
Labels
triage

Comments

@hunterloftis
Copy link

Bug Report

Ionic version: 4 (@ionic/vue@0.0.9)

Current behavior: An app using IonicVueRouter will correctly follow Android transitions, but will ignore iOS transitions. Navigating in iOS sometimes leaves a "ghost" of the previous page's components as they are kept around for the transition animation that never happens.

iOS:
ionic-vue-ios

Android:
ionic-vue-android

Expected behavior: Navigating through the same app in Android and iOS should always include page transitions, regardless of client platform.

Steps to reproduce: Run any @ionic/vue app in chrome with emulation on. Toggle between iPhone 6/7/8 and Nexus 5X, refreshing between each toggle. Navigate through the pages in the app and observe animations on Android but not on iOS.

Ionic info:

Ionic:

   Ionic CLI : 5.2.3

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.4.0
   npm    : 6.9.0
   OS     : Windows 10
@ionitron-bot ionitron-bot bot added the triage label Aug 8, 2019
@hunterloftis
Copy link
Author

Additionally, setting <html mode="md"> restores transitions on an emulated iOS device (with incorrect window sizing, though).

@hunterloftis
Copy link
Author

@michaeltintiuc is there anything else I can provide to help triage? I've been trying to debug the issue myself, but I'm not expert at either vue or ionic.

Digging into node_modules/@ionic/core/dist/esm-es5 I have found that treating everything in getAnimationBuilder as { mode: 'md' } at least allows iOS to have some kind of transitions, even though they're Android-like. I haven't been able to narrow down whether the issue is with iosTransitionAnimation or the use of it in transitions, though.

@hunterloftis
Copy link
Author

After digging through tons of examples, I noticed some with <ion-page class="ion-page">:

ion-page isn't documented in the components list and is only used in a couple of specific cases on the structure doc, but it appears to be necessary to achieve iOS transition animations in ionic 4 + vue at the moment. The same isn't true of Android animations.

After wrapping all of my pages in <ion-page>, ios transitions have started working, so I'm closing the issue.

@michaeltintiuc
Copy link
Contributor

That's a great find, I've never tried without ion-page, it's been ages since I wrote those cookbook examples.

@ionitron-bot
Copy link

ionitron-bot bot commented Sep 9, 2019

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 Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hunterloftis @michaeltintiuc