ionic-framework: bug: webkit performance issue when using large number of css variables

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: This only affects real iOS devices. Tested with a 5 year old iPad and a brand new one. As more UI rich components are added to the page on iOS it gets less and less responsive, until it stops responding and the following error is seen in xCode’s debugger Connection::waitForSyncReply: Timed-out while waiting for reply, which is apparently a WKWebView error message.

Expected behavior: That it behaves like Android, browser and iOS simulators

Steps to reproduce: Create a brand new blank ionic 5 app with one page that uses a loop to add components to the page.

Related code: I have created a github repo that uses the demo for ion-radio from the usage section on the component’s documentation page. You can edit the number added by changing the questionIndexes variable on home.page.ts. It is currently set at 38 loops, and this produces the issue, if you drop the loop to 3, it acts as you would expect.

https://github.com/moridianmess/iOSEfficiency

Other information: This is reproducible with other ionic components, for instance 875 ion-buttons causes the waitForSyncReply error. And the UI starts becoming slow after around 50 are added.

Due to the fact the iOS simulator, Android devices and the browser do not appear to have this issue, my assumption is that this is something to do with WKWebView or the process that interacts with it.

Does anyone have any ideas?

Thanks.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.3
   @angular-devkit/build-angular : 0.1002.2
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.2
   @capacitor/core : 2.4.6

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v14.15.4 (/usr/local/bin/node)
   npm    : 6.14.10
   OS     : macOS Big Sur

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Comments: 25 (12 by maintainers)

Most upvoted comments

Thanks for your timely response to this @liamdebeasi, you’re a star.

Ok so the issue here is that there seems to be a bug in WebKit where using Web Components with a large number of CSS Variables set on the host causes the performance issues you reported here. I can only reproduce this on iOS 14, so this seems like a fairly new bug.

I reported this to the WebKit team here: https://bugs.webkit.org/show_bug.cgi?id=222187

Typically we close related Ionic issues out whenever a fix ships in WebKit, so I will update this thread when that happens. Thanks!

I don’t have an iPhone to test with.