Mungkin sudah ada PR terbuka untuk ini:
https://github.com/ionic-team/ionic/pull/17224

Halo,

Terima kasih atas masalahnya! Apakah Anda dapat menyediakan repositori dengan kode yang diperlukan untuk mereproduksi masalah ini? Selain itu, perangkat / versi iOS mana yang telah Anda uji?

Terima kasih!

Sepertinya peningkatan ke Ionic 4.1.0 menyelesaikan masalah.

Jika itu berarti apa pun yang saya uji di iPhone 8 Plus iOS 12.1.4

Saya masih melihat ini di 4.1.0. Terkadang Anda dapat melihat masalahnya jika Anda membatasi daya CPU dan membuka halaman menggunakan Chrome DevTools. Merasa sulit untuk mereproduksi masalah secara konsisten.

Saya bersedia membantu tetapi saya akan mengalami masalah saat mereproduksi kesalahan setelah kode saya berfungsi. Mungkin jika @rossholdway membagikan kode dan saya dapat melihat apakah ada perbedaan pada kode saya.

Saya hanya ingin memastikan bahwa ini mulai terjadi lagi ... tidak yakin mengapa ini berfungsi dengan baik selama 1 hari. Saya akan mencoba membuat repositori yang mereproduksi masalah.

Pertama saya menambahkan RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ke app-routing.module.ts .

Saat memuat halaman, saya biasanya melindungi komponen agar tidak muncul sebelum data dimuat dengan variabel isLoading: number dan saya menempatkan variabel di dalam komponen seperti ini: *ngIf="!isLoading" .

Ketika saya menghapus *ngIf pernyataan atau menggantinya dengan [tersembunyi] itu berhenti berkedip.

Akan sangat bagus jika @rossholdway atau orang lain menguji ini. Saya belum dapat mereproduksinya di aplikasi baru, tetapi saya tidak mencoba melakukan panggilan API. Saya mencoba mensimulasikan pemuatan dengan setTimeout yang tidak sama.

@liamdebeasi Saya dapat mengganti tombol ion menjadi hanya div dan masalah tetap ada. Saya ingin berpikir bahwa setiap elemen di dalam toolbar harus bertransisi dengan elemen lainnya di toolbar tersebut. Tampak aneh untuk melihat header dan konten ion lainnya melakukan transisi slide sementara tombol muncul tanpa slide dan duduk secara statis saat transisi terjadi.

@liamdebeasi @jayordway Bukan masalah hanya dengan toolbar. ketika saya meletakkan <my-custom-component *ngIf="expression"></my-custom-component> mana saja di dalam konten ion, transisi berhenti.

@ aces-tm Apakah Anda menguji dengan cabang pengembangan baru ionik?

@jayordway tidak, haruskah saya memperbarui ke @latest atau yang lain?

Ah, saya sedang melihat PR yang diusulkan untuk ini dan membaca catatan ini:
https://github.com/ionic-team/ionic/pull/17224#issuecomment -473033208

Halo semuanya,

Kami telah mengirimkan beberapa pembaruan pada transisi halaman di iOS. Silakan coba perbarui ke Ionic 4.1.2 ( npm i @ionic/core<strong i="6">@latest</strong> @ionic/angular@latest ), dan beri tahu saya jika Anda masih mengalami masalah apa pun.

Terima kasih!

@liamdebeasi Saya tidak menyadari bahwa saya perlu menanggapi ... ya, saya masih mengalami masalah yang sama. Saya saat ini di 4.2.0

Ok terima kasih! Saya akan memeriksa masalah ini lagi.

Jika ada sesuatu yang memanggil pengontrol seperti {{ myVariable }} transisi akan rusak. Namun saya memiliki banyak halaman di mana saya akan melakukan panggilan yang sama dan transisi akan berfungsi dengan baik. Saya memuat halaman dengan cara yang sama.

Saya mencoba men-debug ini, tetapi tidak berhasil

Ada pembaruan tentang masalah ini? Saya memiliki masalah yang sama ..

@liamdebeasi Apakah Anda beruntung melacak yang ini? Saya masih melihat masalah ini di v4.4.0. Ini benar-benar berdampak pada UX ketika semua transisi halaman seperti ini. Saya menemukan bahwa itu sering terjadi ketika menggunakan metode Angulars ngOnInit untuk memuat data.

Hai @rosoldway ,

Apakah Anda memiliki reproduksi kode untuk masalah ini yang dapat saya gunakan?

Terima kasih!

@liamdebeasi Ketika saya membuka halaman ini dari menu samping, animasi berhenti.
Beri tahu saya jika Anda dapat menggunakan kode ini. Ini membutuhkan plugin versi aplikasi

about.zip

Halo,

Bisakah Anda memberikan repositori lengkap? Tidak harus seluruh kode aplikasi Anda, tetapi mengetahui bagaimana sidemenu diatur dan bagaimana Anda menyajikan halaman akan sangat membantu.

Terima kasih!

Ini dia. Itu rusak di ponsel saya (iPhone X). Saya yakin Anda hanya perlu menginstal plugin versi aplikasi

plugin ionic cordova tambahkan cordova-plugin-app-version
npm install @ ionic-native / app-version

Buka menu Samping dan buka halaman tentang

app.zip

Terima kasih atas tindak lanjutnya. Saya dapat mereproduksi masalah ini. Kami akan memeriksa perbaikannya!

Saya menjadi gila mencoba mencari tahu mengapa ini terjadi, senang melihat orang lain mengalami masalah yang sama persis dan bahwa tim ionik dapat mereproduksi. Untuk saat ini, saya membuat animasi transisi halaman saya sendiri yang berfungsi dengan baik, tetapi lebih suka menggunakan animasi asli! Saya akan bisa tidur nyenyak sekarang karena saya tahu perbaikan akan segera terjadi :)

Ini terjadi karena Anda menetapkan variabel langganan dan / atau berlangganan ngOnInit () . Saya dapat mengatasi masalah ini dengan menggunakan ionViewDidEnter () daripada ngOnInit (). Namun, saat Anda melakukan ini, halaman tersebut terlihat kosong pada awalnya. Jika Anda tidak menginginkannya, Anda dapat menggunakan elemen hantu untuk mengisi halaman dan kemudian ketika API Anda muncul, cukup tampilkan item yang benar.

Tambahan: Saya tidak tahu ionic sudah memiliki sesuatu yang mirip dengan elemen hantu. Silakan lihat https://ionicframework.com/docs/api/skeleton-text

Jika ada yang ingin mereproduksi masalah, cukup tetapkan langganan API ke nilai di ngOnInit () lalu berlangganan di ion-content ngIf dengan async.

Dalam kasus saya, itu adalah:

TS:

ngOnInit() {
 this.subCategoryData$ = this._fireStoreService.getExampleData();
}

HTML:

<ion-content padding>
  <ng-container *ngIf="subCategoryData$ | async as category$">
    <div class="content-header">
      <div class="page-title">{{ category$.name }} Selections</div>
    </div>
    .
    .
    .
  </ng-container>
</ion-content>

FIX (ganti ngOnInit () dengan ionViewDidEnter ()):

ionViewDidEnter() {
 this.subCategoryData$ = this._fireStoreService.getExampleData();
}

Akan lebih bagus jika ini diperbaiki secepatnya.

@etonyali ini menarik dan menjelaskan mengapa saya melihatnya lebih sedikit di wifi (karena data dimuat bahkan sebelum transisi dimulai), saya bertanya-tanya mengapa langganan mempengaruhi animasi transisi ..

@etonyali Terima kasih! Saya telah melihat ini terjadi juga ketika saya memanggil fungsi async di dalam resolver.

Apakah ada pembaruan tentang masalah ini?

Hai teman-teman, ada kabar tentang yang satu ini? Kami mengalami masalah yang sama ...

Mengalami masalah yang sama di ionic 4.5.0

Hai, beberapa orang baru dengan masalah ini, saya memiliki aplikasi penting yang akan diproduksi dan saya memiliki masalah ini.

Halo semuanya,

Ini masih dalam radar kami, tetapi kami telah fokus pada pengiriman Ionic dengan pembaruan Stencil One. Sekarang pembaruan Stencil One telah dirilis, saya memperbarui aplikasi contoh (https://github.com/ionic-team/ionic/issues/17649#issuecomment-493106320) ke Ionic 4.6.1. (Diuji di iPhone 7)

Dibandingkan dengan versi Ionic sebelumnya, saya memperhatikan peningkatan kinerja dengan transisi iOS. Saya memang melihat sedikit jank, tapi tidak terlihat seperti sebelumnya.

Dapatkah orang lain memperbarui aplikasi mereka ke 4.6.1 dan mengonfirmasi apakah pembaruan mengurangi keparahan masalah ini atau tidak? Saya masih tertarik untuk menyelesaikan masalah yang tersisa, tetapi saya ingin tahu apakah pembaruan membantu sama sekali.

Terima kasih!

Sedikit perbaikan, tapi masih perlu diperbaiki.tidak berkinerja baik sama sekali.
Diuji pada iPhone X, Ionic 4.6.1

Bisakah Anda memberikan contoh kode GIF yang Anda kirim?

masih masalah berlanjut, kami akan meluncurkan aplikasi perbankan, mohon saya butuh bantuan Anda.

@ jtsc22 Dapatkah Anda memberikan repo dengan kode yang diperlukan untuk mereproduksi masalah ini? Untuk masalah seperti ini, memiliki beberapa contoh sangat membantu sehingga kami dapat memastikan bahwa kami "menutupi dasar-dasar kami" untuk berbicara saat mengerjakan perbaikan.

Saya melakukan lebih banyak pengujian dan tampaknya versi 4.6.2 tidak menyelesaikan masalah dengan transisi halaman.

Berikut adalah kode yang saya masukkan di footer dan pada transisi, tidak berfungsi seperti yang diharapkan

<ion-footer>
  <ion-toolbar class="no-border" color="white">
    <ion-textarea
      #textarea
      autoGrow
      rows = "1"
      autocorrect="on"
      autocomplete="on"
      autocapitalize="on"
      placeholder="Send message...">
    </ion-textarea>

    <ion-buttons slot="end">
      <ion-button [disabled]="broadcasting" color="dark" (click)="broadcastMessage(textarea.el.textContent)">
        <ion-icon name="send" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>

  </ion-toolbar>
</ion-footer>

Hai @ aces-tm,

Saya tidak lagi dapat mereproduksi masalah kinerja yang Anda gambarkan setelah memperbarui ke versi terbaru Ionic. Apakah Anda dapat memberikan reproduksi lain?

Selain itu, jika Anda mengatakan "kinerjanya tidak sesuai harapan", apakah yang Anda maksud adalah animasinya tidak mulus, atau footer tidak beranimasi sama sekali?

Terima kasih!

@liamdebeasi Saya baru saja memperbarui aplikasi ke ionic 4.7.1 dan angular 8.1.2 dan masalahnya sama. Masalahnya sama dengan yang saya posting di postingan asli saya yang pertama. Transisi putus dan berkedip. Saya memiliki 3 aplikasi dan hal yang sama terjadi pada semuanya.

Ini package.json saya

"dependencies": {
    "@angular/common": "^8.1.2",
    "@angular/core": "^8.1.2",
    "@angular/forms": "^8.1.2",
    "@angular/platform-browser": "^8.1.2",
    "@angular/platform-browser-dynamic": "^8.1.2",
    "@angular/router": "^8.1.2",
    "@auth0/angular-jwt": "^3.0.0",
    "@ionic-native/contacts": "^5.11.0",
    "@ionic-native/core": "^5.11.0",
    "@ionic-native/device": "^5.11.0",
    "@ionic-native/screen-orientation": "^5.11.0",
    "@ionic-native/sms": "^5.11.0",
    "@ionic-native/splash-screen": "^5.11.0",
    "@ionic-native/status-bar": "^5.11.0",
    "@ionic/angular": "^4.7.1",
    "@ionic/storage": "^2.2.0",
    "@mobiscroll/angular": "file:./src/lib/mobiscroll-package/mobiscroll-angular-4.7.2.tgz",
    "cordova-android": "8.0.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-ios": "^4.5.5",
    "cordova-plugin-contacts": "^3.0.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.0",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sms-plugin": "^1.0.0",
    "cordova-sqlite-storage": "^3.2.0",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "libphonenumber-js": "^1.7.21",
    "moment": "^2.24.0",
    "ngx-moment": "^3.4.0",
    "ngx-socket-io": "^2.1.1",
    "rxjs": "~6.5.1",
    "rxjs-compat": "^6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.802.0",
    "@angular-devkit/build-angular": "^0.802.0",
    "@angular-devkit/core": "^8.2.0",
    "@angular-devkit/schematics": "^8.2.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@ionic/angular-toolkit": "~2.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~8.2.0",
    "tslint": "~5.17.0",
    "typescript": "~3.5.3"
  },

Apakah ada pembaruan tentang ini? Saya masih melihat masalah ini bahkan di 4.8.0

@liamdebeasi Saya ingin mengonfirmasi bahwa transisi berfungsi dengan baik untuk saya setelah saya meningkatkan semua ketergantungan saya. Satu-satunya masalah yang tersisa adalah footer transparan selama animasi. Ini package.json saya

"dependencies": {
        "@angular/common": "~8.1.2",
        "@angular/core": "~8.1.2",
        "@angular/forms": "~8.1.2",
        "@angular/platform-browser": "~8.1.2",
        "@angular/platform-browser-dynamic": "~8.1.2",
        "@angular/router": "~8.1.2",
        "@auth0/angular-jwt": "^3.0.0",
        "@ionic-native/app-version": "^5.12.0",
        "@ionic-native/badge": "^5.12.0",
        "@ionic-native/call-number": "^5.12.0",
        "@ionic-native/camera": "^5.12.0",
        "@ionic-native/clipboard": "^5.12.0",
        "@ionic-native/core": "5.12.0",
        "@ionic-native/document-viewer": "^5.12.0",
        "@ionic-native/email-composer": "^5.12.0",
        "@ionic-native/file": "^5.12.0",
        "@ionic-native/file-chooser": "^5.12.0",
        "@ionic-native/file-path": "^5.12.0",
        "@ionic-native/file-picker": "^5.12.0",
        "@ionic-native/file-transfer": "^5.12.0",
        "@ionic-native/geolocation": "^5.12.0",
        "@ionic-native/google-analytics": "^5.11.0",
        "@ionic-native/image-resizer": "^5.12.0",
        "@ionic-native/in-app-browser": "^5.12.0",
        "@ionic-native/ionic-webview": "^5.12.0",
        "@ionic-native/photo-library": "^5.12.0",
        "@ionic-native/push": "^5.12.0",
        "@ionic-native/screen-orientation": "^5.12.0",
        "@ionic-native/social-sharing": "^5.12.0",
        "@ionic-native/splash-screen": "5.12.0",
        "@ionic-native/status-bar": "^5.12.0",
        "@ionic-native/video-editor": "^5.12.0",
        "@ionic/angular": "^4.8.0",
        "@ionic/core": "^4.8.0",
        "@ionic/storage": "^2.2.0",
        "@mobiscroll/angular": "file:./src/lib/mobiscroll-package/mobiscroll-angular-4.7.3.tgz",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "animate.css": "^3.7.0",
        "call-number": "^1.0.1",
        "chart.js": "^2.8.0",
        "cordova-android": "^8.0.0",
        "cordova-clipboard": "^1.3.0",
        "cordova-ios": "4.5.5",
        "cordova-plugin-add-swift-support": "^2.0.2",
        "cordova-plugin-app-version": "^0.1.9",
        "cordova-plugin-badge": "^0.8.8",
        "cordova-plugin-camera": "^4.0.3",
        "cordova-plugin-device": "^2.0.2",
        "cordova-plugin-document-viewer": "^0.9.10",
        "cordova-plugin-email-composer": "^0.9.2",
        "cordova-plugin-file": "^6.0.1",
        "cordova-plugin-file-transfer": "^1.7.1",
        "cordova-plugin-filechooser": "^1.2.0",
        "cordova-plugin-filepath": "^1.5.1",
        "cordova-plugin-filepicker": "^1.1.5",
        "cordova-plugin-geolocation": "^4.0.1",
        "cordova-plugin-google-analytics": "^1.8.6",
        "cordova-plugin-inappbrowser": "^3.0.0",
        "cordova-plugin-ionic-keyboard": "^2.1.3",
        "cordova-plugin-ionic-webview": "^4.0.1",
        "cordova-plugin-screen-orientation": "^3.0.1",
        "cordova-plugin-splashscreen": "^5.0.2",
        "cordova-plugin-statusbar": "^2.4.2",
        "cordova-plugin-video-editor": "^1.1.3",
        "cordova-plugin-whitelist": "^1.3.3",
        "cordova-plugin-x-socialsharing": "^5.4.4",
        "core-js": "^2.5.4",
        "countries-and-timezones": "^1.0.1",
        "emulate": "1.0.2",
        "es6-promise-plugin": "^4.2.2",
        "info.protonet.imageresizer": "^0.1.1",
        "moment": "^2.23.0",
        "moment-timezone": "^0.5.23",
        "mx.ferreyra.callnumber": "~0.0.2",
        "ng2-charts": "^1.6.0",
        "ngx-moment": "^3.4.0",
        "phonegap-plugin-multidex": "^1.0.0",
        "phonegap-plugin-push": "^2.2.3",
        "rxjs": "~6.5.2",
        "rxjs-compat": "^6.5.2",
        "time-ago-pipe": "^1.3.2",
        "zone.js": "~0.9.1"
    },
    "devDependencies": {
        "@angular-devkit/architect": "^0.802.0",
        "@angular-devkit/build-angular": "^0.802.0",
        "@angular-devkit/core": "^8.2.0",
        "@angular-devkit/schematics": "^8.2.0",
        "@angular/cli": "~8.2.0",
        "@angular/compiler": "~8.2.0",
        "@angular/compiler-cli": "~8.2.0",
        "@angular/language-service": "~8.2.0",
        "@ionic/angular-toolkit": "~2.0.0",
        "@ionic/lab": "1.0.21",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "~5.1.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~8.1.0",
        "tslint": "~5.16.0",
        "tslint-ionic-rules": "0.0.21",
        "typescript": "~3.5.3"
    },

@liamdebeasi saya menggunakan 4.8.1 dan saya masih memiliki masalah: jika saya menggunakan ngIf dalam ion-content animasi transisi halaman tersendat. Jika saya menghapus ngIf semuanya berjalan dengan baik. Saya tidak menggunakan pipa asinkron.

fwiw: masalah juga ada dengan

• angular @ next
• pada produksi yang dibangun (namun pada tingkat yang lebih rendah)
• ChangeDetectionStrategy.OnPush

@liamdebeasi dari pengujian saya sepertinya masalah hanya terjadi jika ekspresi ngIf berubah selama animasi transisi. Jadi mungkin menghapus / menambahkan node dari DOM entah bagaimana mengacaukan animasinya.

@chrisgriffith Ini adalah tangkapan yang bagus dan sangat masuk akal dari apa yang saya alami.

Apakah Anda menggunakan Angular 8? Masalah saya hilang ketika saya meningkatkan ketergantungan saya ke versi terbaru.

@chrisgriff Saya mencoba angular @ 8 serta @ 9 (berikutnya).

saya mengedit komentar saya di atas (https://github.com/ionic-team/ionic/issues/17649#issuecomment-526617719) karena tes awal saya tidak akurat (@liamdebeasi). Masalahnya terjadi pada saya saat ngIf di konten ion terpicu selama animasi halaman.

Saya tidak tahu apakah ini terkait.

Saya memiliki aplikasi ionik 4 di mana pada halaman utama ada animasi - deretan tiga LED berkedip (pola berkedip tergantung pada negara bagian).

Saat saya pertama kali masuk ke halaman utama, LED berkedip dengan benar. Ketika saya meninggalkan halaman utama dan pergi ke halaman lain dan kemudian kembali ke halaman utama, LED tidak berkedip. Animasi tidak lagi berfungsi.

Saya merutekan ke dan dari halaman melalui menu hamburger yang diatur di app.component.ts saya di mana halaman.url adalah misalnya '/ main'

this.router.navigate([page.url]);

CATATAN: Saya hanya melihat ini di perangkat ios.

Ini semua bekerja di ionic 3.

Di bawah ini adalah html

    <div class="leds">
        <div class="led-container">
            <div class="led led-red" [ngClass]="redLedState"></div>
            <div class="led led-yellow" [ngClass]="yellowLedState"></div>
            <div class="led led-green" [ngClass]="greenLedState"></div>
        </div>
    </div>

Ini adalah .scss:

.leds {
    $led-size: 32px;
    $led-green: #33cd5f;
    $led-yellow: #ffc900;
    $led-red: #ef473a;

    <strong i="18">@mixin</strong> on($color) {
      box-shadow: 0 0 4px 0 darken($color, 5%);
    }

    .led-container {
      text-align: center;
      border-bottom: 1px solid #111;
      width: 100%;
      display: block;
      padding: 10px 0px 6px 0px;
    }

    .led {
      display: inline-block;
      border-radius: 50%;
      width: $led-size;
      height: $led-size;
      margin-right: $led-size;
      opacity: 0.2;
      box-shadow: none;

      &:last-child {
        margin-right: 0;
      }

      &.led-green {
        background-color: $led-green;
        &.on, &.slow-flash, &.fast-flash {
          <strong i="19">@include</strong> on($led-green);
        }
      }

      &.led-yellow {
        background-color: $led-yellow;
        &.on, &.slow-flash, &.fast-flash {
          <strong i="20">@include</strong> on($led-yellow);
        }
      }

      &.led-red {
        background-color: $led-red;
        &.on, &.slow-flash, &.fast-flash {
          <strong i="21">@include</strong> on($led-red);
        }
      }

      &.on {
        opacity: 1;
      }
    }

    .slow-flash {
      -webkit-animation: flash linear 1.75s infinite;
      animation: flash linear 1.75s infinite;
      -webkit-transition: none !important;
      transition: none !important;
    }

    .fast-flash {
      -webkit-animation: flash linear 0.4s infinite;
      animation: flash linear 0.4s infinite;
    }

    .slow-flash-add .fast-flash-add {
      -webkit-animation: none !important;
      animation: none !important;
      -webkit-transition: none !important;
      transition: none !important;
    }

    @-webkit-keyframes flash {
      0% {
        opacity: 0.2;
      }
      60% {
        opacity: 0.2;
      }
      62% {
        opacity: 1;
      }
      98% {
        opacity: 1;
      }
    }

    <strong i="22">@keyframes</strong> flash {
      0% {
        opacity: 0.2;
      }
      60% {
        opacity: 0.2;
      }
      62% {
        opacity: 1;
      }
      98% {
        opacity: 1;
      }
    }
  }

Ini info ionik saya:

Ionik:

``
Ionic CLI: 5.2.8 (/Users/.nvm/versions/node/v12.6.0/lib/node_modules/ionic)
Kerangka Ionik: @ ionik / sudut 4.9.0
@ angular-devkit / build-angular: 0.802.2
@ angular-devkit / schematics: 8.3.3
@ angular / cli: 8.3.3
@ionic / angular-toolkit: 2.0.0

Cordova:

Cordova CLI: 9.0.0 ([email protected])
Platform Cordova: android 8.0.0, ios 5.0.1
Cordova Plugins: cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (dan 10 plugin lainnya)

Utilitas:

cordova-res: 0.6.0
native-run: 0.2.8

Sistem:

ios-sim: 8.0.1
NodeJS: v12.6.0 (/Users/.nvm/versions/node/v12.6.0/bin/node)
npm: 6.11.3
OS: macOS Mojave
Xcode: Xcode 10.3 Versi build 10G8

Here are my dependencies:

"ketergantungan": {
"@ sudut / umum": "^ 8.2.5",
"@ angular / core": "^ 8.2.5",
"@ angular / forms": "^ 8.2.5",
"@ angular / platform-browser": "^ 8.2.5",
"@ angular / platform-browser-dynamic": "^ 8.2.5",
"@ angular / router": "^ 8.2.5",
"@ ionic-native / app-version": "^ 5.13.0",
"@ ionic-native / ble": "^ 5.13.0",
"@ ionic-native / core": "^ 5.13.0",
"@ ionic-native / diagnostic": "^ 5.13.0",
"@ ionic-native / dalam-aplikasi-browser": "^ 5.13.0",
"@ ionic-native / insomnia": "^ 5.13.0",
"@ ionic-native / splash-screen": "^ 5.13.0",
"@ ionic-native / sqlite": "^ 5.13.0",
"@ ionic-native / status-bar": "^ 5.13.0",
"@ ionic / angular": "^ 4.9.0",
"@ ngrx / efek": "^ 8.3.0",
"@ ngrx / store": "^ 8.3.0",
"@ ngx-translate / core": "^ 11.0.1",
"@ ngx-translate / http-loader": "^ 4.0.0",
"@ types / d3": "^ 5.7.2",
"@ types / text-encoding": "0.0.35",
"angular": "^ 1.7.8",
"cordova-android": "8.0.0",
"cordova-ios": "5.0.1",
"cordova-plugin-app-version": "^ 0.1.9",
"cordova-plugin-ble-central": "1.2.2",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "^ 2.0.3",
"cordova-plugin -appbrowser": "^ 3.1.0",
"cordova-plugin-insomnia": "^ 4.3.0",
"cordova-plugin-ionic-keyboard": "2.2.0",
"cordova-plugin-splashscreen": "^ 5.0.3",
"cordova-plugin-statusbar": "^ 2.4.3",
"cordova-plugin-whitelist": "^ 1.3.4",
"cordova-sqlite-storage": "^ 3.3.0",
"cordova.plugins.diagnostic": "^ 5.0.0",
"core-js": "^ 3.2.1",
"d3": "^ 5.12.0",
"i": "^ 0.3.6",
"lodash": "^ 4.17.15",
"npm": "^ 6.11.3",
"rxjs": "^ 6.5.3",
"tslib": "^ 1.10.0",
"zone.js": "^ 0.9.1"
}

``

Sekali lagi ini mungkin atau mungkin tidak terkait dengan masalah yang dijelaskan di atas tetapi saya dapat menduplikasi masalah saya (animasi di halaman utama berhenti bekerja saat meninggalkan halaman utama dan kembali ke halaman utama) dalam proyek ionik 4 sederhana yang saya buat. Itu bisa dilihat di repo berikut:

https://github.com/ASHBAW/animation.git

Ada pembaruan tentang masalah ini? Mengubah dari ngOnInit() menjadi ionViewDidEnter() memperbaiki masalah, tetapi bukan solusi yang ideal karena fakta bahwa panggilan API atau permintaan firestore dilakukan beberapa saat kemudian dalam transisi.

Saya mengalami masalah yang sama (gangguan animasi transisi halaman) dengan versi terbaru dari angular dan ionic-angular.

Pengaturan:

• memuat data dari server GraphQL (dalam ngOnInit ):

ngOnInit() {
   this.id = this.route.snapshot.paramMap.get('id');
   this.client$ = this.backendService.loadClient({id: this.id});
}

• template:

<div *ngIf="client$ | async as client; else loading">
... big chunk of template html ...
</div>
<ng-template #loading>
  <app-loading-spinner></app-loading-spinner>
</ng-template>

Pengamatan saya sejalan dengan https://github.com/ionic-team/ionic/issues/17649#issuecomment -526617719:

• jika data diterima selama animasi transisi, animasi terputus, mungkin karena sebagian besar html template ditambahkan ke DOM (namun: jika sebagian besar html template sebenarnya tidak besar, interupsi hampir tidak terlihat)
• jika data diterima setelah animasi transisi, maka tidak ada interupsi.
• solusi: memuat data dalam ionViewDidEnter . Transisinya lancar, tetapi data dimuat nanti. Selain itu, saat data dimuat dengan sangat cepat (dari cache setelah permintaan pertama), ini membutuhkan waktu lebih lama dari yang diperlukan.
• solusi lain: jangan gunakan blok else dan berlangganan yang dapat diamati di ngOnInit

solusi

@iherger seperti yang disebutkan di atas (dan sejauh yang saya bisa mengerti / mereproduksinya) masalah terjadi setiap kali sesuatu ditambahkan atau dihapus dari DOM selama transisi halaman. memigrasi semua ngIf ke [hidden] menghapus masalah bagi saya tanpa harus menunda tampilan data (karena [hidden] tidak menghapus atau menambahkan apa pun). jelas ini bukan perbaikan (meskipun saya kira ini seharusnya membuat perbaikan tidak terlalu sulit ditemukan untuk seseorang yang akrab dengan internal ion @liamdebeasi)

@chriswep terima kasih konfirmasinya. Itu masuk akal.

Saya mencoba untuk mempertahankan langganan observable di template (menggunakan *ngIf dan pipa async), dan dalam kasus ini, [hidden] tidak berfungsi, jika saya tidak salah.

Saya mencoba untuk mempertahankan langganan observable di template (menggunakan *ngIf dan pipa async), dan dalam kasus ini, [hidden] tidak berfungsi, jika saya tidak salah.

benar, jika Anda menggunakan [hidden] Anda perlu mengelola langganan Anda sendiri (berlangganan, menyetel nilai pada komponen, menghentikan langganan onDestroy). selain itu [hidden] jelas merupakan boolean negatif dari *ngIf . karena saya tidak tahu kapan ini akan diperbaiki (ini sudah masalah berjalan lama) jika sedikit peluru untuk tidak macet memperbarui aplikasi saya.

Untuk menambah ini ... Saya mengubah proyek saya untuk bekerja dengan Kapasitor dan saya masih mengalami masalah yang sama.

Masalah ini tampaknya lebih baik ditangani di tingkat aplikasi daripada di tingkat kerangka kerja.

Menggunakan ionViewDidEnter alih-alih ngOnInit berfungsi karena ionViewDidEnter dijalankan setelah animasi selesai, sedangkan ngOnInit dijalankan ketika komponen halaman dibuat (sebelum animasi telah dimulai).

Melakukan render ulang konstan melalui *ngIf atau pipa akan menyebabkan browser melakukan banyak pekerjaan. Ini sering disebut sebagai "layout thrashing". Sementara animasi navigasi ditangani di luar utas utama, kode JavaScript dan animasi Anda berbagi sumber daya tertentu. Perenderan ulang ini menyebabkan browser terus-menerus menggunakan sumber daya ini, menyisakan lebih sedikit waktu sumber daya / komputasi untuk animasi itu sendiri.

Hal lain yang perlu disebutkan adalah mengubah status *ngIf akan terus menambah / menghapus elemen dari DOM, yang merupakan operasi _very_ mahal secara umum. Penting untuk diingat bahwa kode Anda seringkali akan menyebabkan Angular menjalankan lebih banyak kode, yang akan menyebabkan browser harus melakukan lebih banyak pekerjaan (beberapa orang telah menyebutkan ini, saya hanya ingin mengulanginya).

Dari contoh yang telah Anda berikan, ada cukup banyak pekerjaan yang dilakukan saat animasi masih dalam transisi. Saya akan merekomendasikan bahwa pekerjaan ini diselesaikan setelah animasi selesai dengan menggunakan ionViewDidEnter . Jika Anda benar-benar membutuhkan tampilan untuk "siap" saat animasi dimulai, Anda mungkin perlu melakukan pramuat / cache data Anda, membatasi seberapa sering pipa / data Anda menyebabkan tampilan dirender, atau memastikan bahwa elemen Anda tidak terus-menerus dihapus dari atau ditambahkan ke DOM.

Seperti yang saya katakan sebelumnya, menurut saya ini adalah masalah yang akan ditangani dengan lebih baik di tingkat aplikasi melalui pengoptimalan kode daripada di tingkat kerangka kerja. Ada pemikiran atau pertanyaan? Terima kasih!

@liamdebeasi Terima kasih atas penjelasannya. Sangat membantu untuk mengetahui bahwa ini tidak dapat diselesaikan dan kami menganggap ini sebagai solusi akhir.

Ya, saya bisa mengerti bahwa ini mungkin membuat frustrasi. Deteksi perubahan Angular tentu bisa rumit dan terkadang merugikan Anda.

Anda juga mungkin mendapatkan hasil yang sedikit lebih baik dengan menggunakan strategi deteksi perubahan OnPush, jadi Anda mungkin ingin mencobanya juga: https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection- strategi-5bac493074a4

ionViewDidEnter bekerja sangat baik dan bagi saya, tidak perlu melihat hal lain.

@liamdebeasi saya tidak begitu yakin bahwa ini adalah masalah sebenarnya di sini. ini berfungsi sebelumnya di aplikasi yang sama tanpa masalah apa pun (tidak bisa memastikan sekarang kapan dimulai, itu pasti masih berfungsi dengan Ionic 3). juga tidak terlihat hanya tentang kinerja - sepertinya animasi tersebut terganggu di beberapa titik, seperti jika beberapa acara atau animasi saling mengganggu. Selain itu, masalah ini tidak hilang pada mesin pengembang super cepat.

menggunakan * ngIf pada halaman transisi seharusnya berfungsi dan berfungsi. ini bukan hanya tentang pramuat data tetapi tentang bagaimana kita mengatur template sudut dan komponen. menunda observable, async-pipe / ngIf hingga halaman selesai masuk (atau bahkan dipaksa untuk tidak menggunakan hal-hal dasar itu lagi jika Anda menginginkan UI yang cepat) tidak dapat benar-benar menjadi solusi untuk Ionic selanjutnya.

@liamdebeasi , terima kasih atas detail tanggapannya.

Saya memahami konsep umumnya, tetapi menurut saya mungkin ada masalah di sini. Dalam kasus saya, saya misalnya beralih dari daftar klien ke tampilan rinci klien. Data klien (sekitar 20 titik data, jadi tidak ada yang utama) diambil dalam kueri GraphQL. Namun, segera setelah data diterima, animasi terputus (jika saya menggunakan observable dan pipa asinkron). Template detail klien tidak besar, dan tepat ada satu *ngIf yang berlangganan observable.

@chriswep Jadi untuk beberapa konteks tentang apa yang terjadi di bawah tenda - Kami menggunakan Animasi CSS / Animasi Web (tergantung pada dukungan browser) untuk membuat animasi navigasi ini. Kami kemudian meneruskan pekerjaan itu ke browser untuk dijalankan / dirender. Kami tidak menjalankan animasi ini dalam putaran requestAnimationFrame seperti yang dilakukan beberapa perpustakaan animasi, jadi sebenarnya tidak banyak "hal" yang dilakukan Ionic selain membuat animasi dan memberi tahu browser untuk memutarnya.

Selain itu, transisi navigasi iOS menganimasikan properti transform dan opacity yang merupakan properti yang dapat ditangani pada utas terpisah (biasanya disebut "utas pembuat" di Chrome). Saya tidak yakin apa lagi yang bisa kami lakukan untuk mengoptimalkan animasi ini karena kami sudah menyerahkan sebagian besar pekerjaan ke browser.

Saya setuju bahwa ada lebih dari sekadar menggunakan * ngIf / a hidden class. Contoh saya adalah subset dari pengoptimalan berbeda yang dapat Anda lakukan (saya tidak mengingat semuanya di atas kepala saya 🙂).

Jika Anda dapat memberikan contoh yang berfungsi ini berjalan dengan baik di aplikasi Ionic 3 saya dengan senang hati akan melihatnya.

sunting: Saya juga ingin mengklarifikasi bahwa saya tidak bermaksud untuk menyarankan Anda _never_ menggunakan hal-hal seperti * ngIf, maksud saya bahwa ada waktu dan tempat untuk semuanya. Misalnya, jika Anda tidak memerlukan elemen pada halaman, sebaiknya gunakan * ngIf untuk menghapusnya dari DOM; namun, tindakan menghapus elemen dari DOM merupakan operasi yang mahal dengan sendirinya sehingga penting untuk memperhatikan apa yang Anda lakukan serta seberapa sering Anda melakukannya.

@iherger Dapatkah Anda memberikan profil Garis Waktu dari aplikasi Anda? Sulit untuk mengatakan apa yang terjadi tanpa melihat datanya sendiri. Di Safari Dev Tools, klik tab "Timelines" dan klik lingkaran merah di kiri atas untuk mulai merekam. Setelah selesai, klik tombol persegi di kiri atas. Kemudian, klik tombol "Ekspor" dan lampirkan file ke utas ini.

Saya sangat penasaran untuk melihat apakah ada pengoptimalan tambahan yang dapat kami lakukan di Ionic Framework selain animasinya.

Tentu saja reproduksi yang berfungsi akan ideal, tetapi sepertinya ada komponen sisi server di sini jadi saya tidak yakin apakah itu mungkin dari pihak Anda.

@liamdebeasi terima kasih telah melihat ini.

Terlampir adalah garis waktu. Ada gangguan nyata dalam transisi.

localhost-recording.json.zip

@iherger Terima kasih atas data timeline! Saya telah mengidentifikasi dua poin selama transisi yang kemungkinan menyebabkan kelambatan Anda:

Pohon panggilan untuk "Acara Klik Dikirim" dan "Muat Acara Dikirim" keduanya membutuhkan waktu yang cukup lama. Untuk konteks, untuk animasi 60 fps, setiap frame harus memakan waktu ~ 16,7 md, dan seluruh operasi untuk ini masing-masing memerlukan waktu 86,11 md dan 29,02 md. Akibatnya, tugas-tugas ini tersebar di beberapa bingkai karena tidak dapat diselesaikan dalam 16,7 md. Di sinilah animasi lag Anda akan ikut bermain.

Anda juga dapat memvisualisasikan ini dalam bentuk bingkai:

Perhatikan bahwa ada 3 kali frame turun di bawah 30fps. Agaknya, ini adalah 3 peristiwa yang Anda lihat di gambar pertama.

Untuk konteksnya, acara ke-2 "Pengumpulan Sampah Penuh" hanyalah pembersihan dan tampaknya terjadi setelah animasi selesai, jadi saya tidak terlalu khawatir tentang itu (saya berharap perlu ada pembersihan setelah navigasi selesai). Saya juga berasumsi bahwa permintaan jaringan (bagian biru muda pada garis waktu) adalah hasil GraphQL Anda.

Jika Anda mengklik kanan acara pertama dan mengklik "Perluas Semua", Anda akan melihat cukup banyak pemrosesan yang terjadi di sisi Angular. Saya tidak akan memposting tangkapan layar di sini karena pohon panggilan cukup besar, tetapi Anda harus memperhatikan panggilan dari zona Angular, Inti Angular, Router Sudut, fungsi utilitas, dan lainnya. Saya tidak melihat tugas khusus ionik yang memakan waktu pemrosesan lebih dari ~ 1ms. Ionic Angular biasanya adalah file fesm5.js yang akan Anda lihat di sana. Saya melihat hasil yang serupa dengan acara "Muat Acara yang Dikirim" kedua.

Anda juga dapat melihat bahwa setelah peristiwa pertama (yang merupakan blok ungu terbesar di timeline) ada beberapa penghitungan ulang Paint, Composite, dan Style yang terjadi (kemungkinan karena deteksi perubahan Angular mencoba merender ulang komponen).

Sulit untuk membuat kesimpulan yang pasti tanpa melihat kode yang sebenarnya dan menjalankan aplikasi, tetapi sampai sekarang tidak ada dari sisi Ionic yang berkontribusi secara signifikan terhadap kelambatan yang Anda alami. Semoga ini membereskan semuanya!

@liamdebeasi terima kasih atas semua informasi latar belakangnya. Saya juga yakin bahwa Ionic melakukan pekerjaan yang baik dalam mengoptimalkan segalanya untuk kinerja yang baik. saya baru saja menyarankan kemungkinan bahwa ini tidak terkait dengan kinerja atau optimasi (hilang) tetapi ini (hanya) bug. tentu saja saya mungkin salah di sini. Namun karena saya merasa saya tidak bisa begitu saja menerima status quo ini sekarang, saya berusaha untuk membuat dua proyek Ionic kosong, satu dengan Ionic 4 dan satu dengan versi 3. Saya menambahkan halaman kedua "Page2" dan sebuah tombol di beranda yang mengarah ke sana. "Halaman2" memiliki ini di pengontrol:

  ngOnInit() {
    setTimeout(() => {
      this.showDiv = true;
    },50)
  }

dan ini di template:

<ion-content>
  <div *ngIf="showDiv">Delayed content</div>
</ion-content>

Versi Ionic 4 dengan jelas menunjukkan masalah (diuji pada mode Safari Reponsive Design pada mesin dev cepat, serta iOS Sim), versi Ionic 3 berfungsi dengan baik.

Oh ya, pasti ada bug! Apakah Anda dapat membagikan 2 proyek tersebut dengan saya?

Oh ya, pasti ada bug! Apakah Anda dapat membagikan 2 proyek tersebut dengan saya?

IosPageTransitionBug_Ionic3vs4.zip

Terima kasih atas tindak lanjutnya. Saya dapat mereproduksi kelambatan dalam versi v4 aplikasi di Safari.

Kelambatan tampaknya berasal dari NgZone yang berjalan di waktu tunggu. Aplikasi v3 menggunakan Angular 5.x, tetapi aplikasi v4 menggunakan Angular 8.x jadi sulit untuk mengatakan apa yang berbeda di Angular / NgZone yang menyebabkan perubahan ini.

Untuk menunjukkan bahwa jeda ini terkait dengan Angular / NgZone, Anda dapat mencoba yang berikut ini:

import { NgZone } from '@angular/core';

...

constructor(private zone: NgZone) {}

...

ngOnInit() {
  this.zone.runOutsideAngular(() => {
    setTimeout(() => {
      this.showDiv = true;
    }, 50);
  });
}

Dengan menjalankan di luar NgZone, lag akan hilang seluruhnya. Saya masih menggali semua jejak NgZone saat menjalankan perekaman Timeline di Safari, jadi saya akan memposting informasi tambahan di sini saat saya memilikinya.

Dengan menjalankan di luar NgZone, lag akan hilang seluruhnya.

Itu mungkin karena * ngIf tidak terpicu yang secara efektif menyebabkan animasi ionik terputus. Juga, jika Anda membiarkan kode pengontrol apa adanya dan hanya mengganti * ngIf dengan [hidden], semuanya baik-baik saja.

Benar, jadi ngIf akan menambah / menghapus div dari DOM sedangkan direktif tersembunyi hanya akan menambahkan "display: none" ke div. Penghapusan / penambahan DOM biasanya lebih mahal daripada hanya mengubah tampilan.

Satu hal yang menarik adalah saya tidak dapat mereproduksi ini di Chrome (atau browser lain) pada mesin yang sama. Saya ingin tahu apakah kita mengalami kasus tepi di Safari? Atau mungkin karena Chrome mendukung penahanan css, itu bukan masalah?

(Hanya untuk menambahkan ini, saya telah dapat melakukan repo ini di Chrome di aplikasi saya sendiri dengan menurunkan kinerja CPU ke yang paling lambat di alat pengembang)

Ah menarik. Saya memiliki CPU yang disetel ke pelambatan 6x di dev tools dan kinerjanya masih tampak cukup bagus. Saya akan terus menggali.

Jadi saya ingin mencoba satu hal. Dapatkah Anda melakukan hal berikut dan memberi tahu saya jika masalah kinerja hilang atau terus berlanjut di Safari?

1. Instal build dev ini: npm i @ionic/[email protected]
2. Tambahkan CSS berikut ke src/global.scss :

ion-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .inner-scroll {
    padding-top: 44px;
    background: white;
    height: 100%;
  }
}

1. Coba uji lagi menggunakan aplikasi v4 @chriswep yang disediakan.

Konten aplikasi Anda akan terlihat sedikit funky, tetapi saya sangat tertarik untuk melihat apakah masalah kinerja telah hilang. Jika ya, saya punya teori mengapa.

tapi saya sangat tertarik untuk melihat apakah masalah kinerja telah hilang

transisi berjalan tanpa masalah dengan ini (setidaknya di Safari)

Sepakat. Menguji ini di Safari di iOS dengan contoh @chriswep disediakan. Transisi berjalan tanpa masalah setelah menginstal build dev (dan menambahkan CSS). 🎉 Apa teori / perbaiki Anda @liamdebeasi

Tebakan saya saat ini adalah masalah kinerja yang Anda lihat sebenarnya terkait dengan bug ini di WebKit: https://bugs.webkit.org/show_bug.cgi?id=201048

Animasi di Shadow DOM cenderung macet / tersendat saat tata letak tidak valid. Dalam kasus ini Node.insertBefore menyebabkan masalah. Sayangnya, Angular terkadang dapat memanggilnya saat mengevaluasi sebuah ngIf, jadi masalahnya lebih mudah untuk digali di aplikasi Angular.

Saya sedang berdiskusi dengan tim, apakah mungkin ada solusi yang tepat untuk saat ini.

Ada pembaruan Liam? Terima kasih!

Liam, sebagai pengembang, kami tidak dapat melanjutkan pembuatan iOS hingga masalah ini teratasi. Ada beberapa bandaid yang tersedia, tetapi penurunan kinerja aplikasi membuatnya hampir tidak dapat digunakan oleh klien. Masalah ini sudah nongkrong di sana selama 9 bulan, kapan kita bisa melahirkan solusi yang permanen dan lengkap?

Halo @pvroom ,

Sayangnya ini bukan masalah dengan Ionic, melainkan masalah di WebKit / Safari. Kami telah menghubungi beberapa kontak di tim WebKit untuk melihat apakah mereka dapat melihat masalah tersebut.

Hal terbaik yang dapat saya rekomendasikan adalah menunda memperbarui tampilan sampai animasi berakhir. Saya menyadari ini bukan solusi yang ideal, tetapi tidak banyak yang dapat kami lakukan dari sisi Kerangka Ionic seperti sekarang. Saya akan memperbarui utas ini ketika saya memiliki lebih banyak info untuk dibagikan. Terima kasih!

Hai Liam,
Terima kasih sudah membalas ini. Anda mengatakan bahwa ini bukan masalah Ionic tetapi Ionic adalah orang yang bertanggung jawab untuk mengubah platform Ionic 4 mereka ke pendekatan berbasis PWA yang sangat bergantung pada Shadow Dom / Webkit, dll. Kami tidak memiliki masalah ini dengan build Ionic 3 . Jadi saya harap Anda menghargai kekecewaan saya ketika Anda mengatakan "ini bukan masalah dengan Ionic." Selama setahun terakhir, Ionic telah menghentikan sebagian besar dukungan berkelanjutan untuk Ionic 2/3, yang berfungsi dengan baik untuk aplikasi seluler kami dan Ionic sekarang berkonsentrasi pada pendekatan PWA dengan Ionic 4. Jadi kami cukup banyak terpaksa beralih ke penggunaan Ionic 4, hanya untuk mengetahui bahwa Ionic 4 membawa serta masalah kinerja yang serius seperti ini. Tidak masalah bagi kami bahwa ini adalah masalah webkit, yang penting bagi kami adalah bahwa Ionic telah menempatkan kami pada posisi ini dengan mengandalkan faktor eksternal yang tampaknya berada di luar kendali Anda. Setelah 9 bulan menunggu perbaikan, kami menjadi sangat putus asa.

Kami menghargai masukan Anda! Kami pindah ke Shadow DOM karena peningkatan kinerja dan enkapsulasi yang dibawanya. Perpindahan ini juga memungkinkan kami untuk secara dinamis menentukan tema aplikasi Anda pada waktu proses tanpa memiliki beberapa bundel CSS. Memperlambat beberapa bundel waktu build, waktu startup, dll. Anda dapat mempelajari lebih lanjut tentang manfaat Shadow DOM di sini: https://developers.google.com/web/fundamentals/web-components/shadowdom.

Saya memahami bahwa hal ini menjengkelkan, dan kami sangat ingin menemukan penyelesaian yang tepat untuk masalah ini. Selain itu, saya telah memberikan solusi di atas yang memungkinkan Anda menghindari masalah kinerja ini sepenuhnya.

Saya akan mengunci utas ini untuk saat ini. Saya pikir status masalah saat ini cukup jelas, dan saya tidak ingin menambahkan email tambahan yang tidak diinginkan ke kotak masuk pengguna lain yang telah berinteraksi dengan utas ini. Terima kasih!

Halo semuanya,

Saya ingin memberikan update tentang masalah ini. Saya menutup utas ini karena masalah utama telah diselesaikan di WebKit (https://bugs.webkit.org/show_bug.cgi?id=201048).

Tim Ionic tidak tahu persis kapan perbaikan ini akan tersedia karena itu tidak di bawah kendali kami. Untuk bug lainnya, silakan buka edisi baru.

Terima kasih!

Pembaruan cepat: Masalah WebKit yang saya tautkan telah diperbaiki dan dirilis sebagai bagian dari Pratinjau Teknologi Safari terbaru (rilis 101 pada saat penulisan). Ternyata, bug ini tidak hanya terkait dengan Shadow DOM karena tim WebKit dapat mereproduksi masalah ini di luar Shadow DOM.

Kami tidak memiliki garis waktu kapan perbaikan akan tersedia untuk semua pengguna karena jadwal rilis dikendalikan oleh Apple.