search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.91k stars 13.52k forks source link

bug: Custom page transition not working on device since 5.2.0 #21560

Closed mariusbolik closed 4 years ago

mariusbolik commented 4 years ago

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

Everything works well on browser. But my custom transition behaves very strange when running on a real device using Cordova. Preview:

Expected behavior:

This is how it looks on browser:

Steps to reproduce:

I'm using the latest dev build because globally set page transitions were overwritten in 5.2.0: https://github.com/ionic-team/ionic/issues/21495

Related code:

A sample project using the custom page transition: https://github.com/mariusbolik/ionic-custom-page-transition The transition: https://github.com/mariusbolik/ionic-custom-page-transition/blob/master/src/app/transitions/page-transition.ts

Other Info:

cordova 9.0.0
cordova-plugin-ionic-webview 5.0.0
cordova-ios 6.0.0
liamdebeasi commented 4 years ago

Thanks for the issue. This has already been resolved via #21508, and a fix will be available in the next release of Ionic Framework.

mariusbolik commented 4 years ago

@liamdebeasi I still have this issue using the dev build mentioned here: https://github.com/ionic-team/ionic/issues/21495#issuecomment-642818000

liamdebeasi commented 4 years ago

What device are you testing this on?

mariusbolik commented 4 years ago

I'm using an iPhone 8 :)

liamdebeasi commented 4 years ago

I was able to reproduce the issue using an iPhone 7 on iOS 13.4 using Ionic Angular 5.2.1, but the issue seems to be resolved for me when I use the dev build.

mariusbolik commented 4 years ago

I'm using @ionic/angular@5.3.0-dev.202006111707.7c8f621 and @ionic/angular@5.3.0-dev.202006111707.7c8f621 and still having this issue. The transitions doesn't behave as they should. Here is the important Part of my package.json:

"dependencies": {
    "@angular/common": "^9.1.11",
    "@angular/core": "^9.1.11",
    "@angular/forms": "^9.1.11",
    "@angular/platform-browser": "^9.1.11",
    "@angular/platform-browser-dynamic": "^9.1.11",
    "@angular/router": "^9.1.11",
    "@ionic-native/action-sheet": "^5.26.0",
    "@ionic-native/app-version": "^5.26.0",
    "@ionic-native/core": "^5.26.0",
    "@ionic-native/dialogs": "^5.26.0",
    "@ionic-native/email-composer": "^5.26.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/keyboard": "^5.26.0",
    "@ionic-native/launch-navigator": "^5.26.0",
    "@ionic-native/launch-review": "^5.26.0",
    "@ionic-native/network": "^5.26.0",
    "@ionic-native/open-native-settings": "^5.26.0",
    "@ionic-native/purchases": "^5.26.0",
    "@ionic-native/safari-view-controller": "^5.26.0",
    "@ionic-native/social-sharing": "^5.26.0",
    "@ionic-native/splash-screen": "^5.26.0",
    "@ionic-native/status-bar": "^5.26.0",
    "@ionic/angular": "^5.3.0-dev.202006111707.7c8f621",
    "@ionic/angular-toolkit": "^2.2.0",
    "@ionic/core": "^5.3.0-dev.202006111707.7c8f621",
    "@ionic/storage": "^2.2.0",
    "angular-highcharts": "^9.0.11",
    "cordova-annotated-plugin-android": "^1.0.4",
    "cordova-common": "^4.0.1",
    "cordova-ios": "^6.0.0",
    "cordova-launch-review": "^3.1.1",
    "cordova-open-native-settings": "^1.5.2",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appcenter-analytics": "^0.5.1",
    "cordova-plugin-appcenter-crashes": "^0.5.1",
    "cordova-plugin-appcenter-shared": "^0.5.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-dialogs": "2.0.2",
    "cordova-plugin-email-composer": "^0.9.2",
    "cordova-plugin-googlemaps": "^2.7.1",
    "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-purchases": "^1.1.0",
    "cordova-plugin-safariviewcontroller": "1.6.0",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-plugin-x-socialsharing": "^5.6.8",
    "core-js": "3.6.4",
    "es6-promise-plugin": "^4.2.2",
    "highcharts": "^8.1.2",
    "ionicons": "^5.0.1",
    "lottie-web": "^5.6.10",
    "moment": "^2.26.0",
    "ngx-filter-pipe": "^2.1.2",
    "ngx-lottie": "^6.1.0",
    "ngx-moment": "^4.0.1",
    "ngx-order-pipe": "^2.0.4",
    "rxjs": "^6.5.5",
    "semver": "^7.3.2",
    "tslib": "~1.10.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.4",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.901.8",
    "@angular-devkit/build-angular": "^0.901.8",
    "@angular-devkit/core": "^9.1.8",
    "@angular-devkit/schematics": "^9.1.8",
    "@angular/animations": "^9.1.11",
    "@angular/cli": "^9.1.8",
    "@angular/compiler": "^9.1.11",
    "@angular/compiler-cli": "^9.1.11",
    "@angular/language-service": "^9.1.11",
    "@types/jasmine": "^3.5.10",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.12.47",
    "@webcomponents/webcomponentsjs": "^2.4.3",
    "codelyzer": "^5.2.2",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^5.1.0",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "^5.20.1",
    "typescript": "3.7.5"
  },
  "description": "Du parken? Hier Plätze!",
  "cordova": {
    "platforms": [
      "ios"
    ],
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "uk.co.workingedge.phonegap.plugin.launchnavigator": {
        "GOOGLE_API_KEY_FOR_ANDROID": "XXX",
        "LOCATION_USAGE_DESCRIPTION": "Öffnen der im System integrierten Karten App für Navigationswecke.",
        "OKHTTP_VERSION": "3.12.0"
      },
      "cordova-plugin-x-socialsharing": {
        "PHOTO_LIBRARY_ADD_USAGE_DESCRIPTION": "This app requires photo library access to function properly.",
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app requires photo library access to function properly."
      },
      "cordova-plugin-app-version": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-open-native-settings": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "XXX",
        "API_KEY_FOR_IOS": "XXX",
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
      },
      "cordova-plugin-dialogs": {},
      "cordova-plugin-actionsheet": {},
      "es6-promise-plugin": {},
      "cordova-plugin-safariviewcontroller": {},
      "cordova-plugin-appcenter-analytics": {},
      "cordova-plugin-appcenter-crashes": {},
      "cordova-launch-review": {},
      "cordova-plugin-purchases": {},
      "cordova-plugin-email-composer": {}
    }
  }
mariusbolik commented 4 years ago

@liamdebeasi I uninstalled @ionic/angular and @ionic/core and reinstalled @ionic/angular. Now it works for. Very strange. But thank you so much vor investigating!!! One small question: I can't import the function getIonPageElement and SwipeToCloseDefaults in my custom transition. So I have to move the whole function out of the Ionic source code. It would be so much easier to simply import the functions like that: import { getIonPageElement } from '@ionic/core';

Would this be possible? :)

mariusbolik commented 4 years ago

Oh and now the Modal behaves a bit strange :( https://imgur.com/a/G9yL66N It's the normal swipeable model.

liamdebeasi commented 4 years ago

Can you reproduce the modal issue in the original repo you sent?

mariusbolik commented 4 years ago

Okay give me a view minutes :)

mariusbolik commented 4 years ago

I could reproduce it with the latest dev build I could find: @ionic/angular@5.3.0-dev.202006151602.7457fe2 And I could reproduce it in the dev build with the fix for the page transitions: @ionic/angular@5.3.0-dev.202006111707.7c8f621

Video: https://imgur.com/a/QMyWV2j

Repo is updated (using the latest dev build): https://github.com/mariusbolik/ionic-custom-page-transition

Edit: This happens on pages and modals. Only on swipe gesture. You can see both video if you click the imgur link.

liamdebeasi commented 4 years ago

What version of iOS are you testing this on? I am not able to reproduce the issue on my device.

mariusbolik commented 4 years ago

Currently I'm using iOS 13.3 :)

liamdebeasi commented 4 years ago

Thanks! I tried your demo on an iPhone 8 running iOS 13.3 and was unable to reproduce the issue still. The animations (even when using the swipe gesture) all appear smooth without any jumping.

Maybe try updating your phone to iOS 13.4?

mariusbolik commented 4 years ago

Okay I'm updating my phone to the latest iOS Version now. And will tell you the result in a few minutes. In the meantime I testet the app on the simulator and there isn't any transition: https://imgur.com/a/6nOjsLH

mariusbolik commented 4 years ago

I updated my iPhone 8 to iOS 13.5.1, updated Xcode to 11.5, cleaned the build folder and reinstalled node modules. Bug is still present in 5.3.0-dev.202006111707.7c8f621 :(

liamdebeasi commented 4 years ago

Unfortunately, since I cannot reproduce this issue there is not anything for me to fix. Are there any specific steps I should be following?

mariusbolik commented 4 years ago

What I did:

  1. Download repo
  2. change Bundle ID
  3. npm i
  4. ionic cordova platform add ios@latest
  5. open Xcode
  6. set provisioning profiles
  7. Product -> Clean Build Folder
  8. Product -> Clean Build Folder with pressed option key
  9. ionic cordova build ios --prod
  10. click play button in xcode

I recently updated NodeJS to v12.18.0 and Ionic CLI to 6.10.1.

The bug is still present. Even on other Devices (iPhone Xr iOS 13.4.1) I also testet with Version 5.1.1 and 5.0.7 and got the same bug. That's very strange.

Could it depend on Node or the CLI that my Ionic Apps behave this strange?

mariusbolik commented 4 years ago

@liamdebeasi got the same problem on safari on iOS 13.5.1 using Ionic 5.2.2 without custom transitions:

Here is the deployment: https://ionic-demo.vercel.app You have to swipe a little bit faster.

ionitron-bot[bot] commented 4 years ago

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.