JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>Three js crashes on iPad IOS 14</title>
    <button onclick="runTreeJsFree()">Run With No Three.js</button>
    <button onclick="runTreeJs()">Run With Three.js</button>
    <div id='counter'>Resize number: 0</div>
</html>

JavaScript

function runTreeJsFree() {
  const canvas = document.createElement('canvas');
  document.body.appendChild( canvas )
  const counter = document.getElementById('counter');
  for (let i = 0; i < 1000; ++i) {
    counter.innerText = 'Resize number: ' + i;
    canvas.width = (50+i*97)%1000;
    canvas.height = (50+i*97)%1000;
  }
}

function runTreeJs() {
  const renderer = new THREE.WebGLRenderer();
  const canvas = renderer.domElement;
  document.body.appendChild( canvas )
  const counter = document.getElementById('counter');
  for (let i = 0; i < 1000; ++i) {
    counter.innerText = 'Resize number: ' + i;
    canvas.width = (50+i*97)%1000;
    canvas.height = (50+i*97)%1000;
  }
}