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

```