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

const contextAttributes = {
  alpha: false,
  antialias: false,
  depth: true,
  failIfMajorPerformanceCaveat: false,
  powerPreference: "default",
  premultipliedAlpha: true,
  preserveDrawingBuffer: false,
  stencil: true,
  xrCompatible: true
}

function runTreeJsFree() {
  const canvas = document.createElement('canvas');
  canvas.addEventListener('webglcontextlost', onContextLost, false);
  canvas.addEventListener('webglcontextrestored', onContextRestore, false);
  const context = canvas.getContext('webgl', contextAttributes);
  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;
  }
}

//

function onContextLost(event) {

  event.preventDefault();

  console.log('Context Lost.');

}

function onContextRestore() {

  console.log('THREE.WebGLRenderer: Context Restored.');

}