Three.js: iPad IOS 14 Safari/Chrome crashes after several canvas resizes

[Okavango]

Describe the bug

Three js crashes on iPad IOS 14 after several canvas resizes

To Reproduce

Open https://jsfiddle.net/jfbt6zxa/4/ with iPad IOS 14, press ''Run With Three.js" button
On my iPad Pro the maximum number of resizes before crash in 363
Version without Three.js works fine

Code

        const renderer = new THREE.WebGLRenderer();
        const canvas = renderer.domElement;
        document.body.appendChild( canvas );
        for (let i = 0; i < 1000; ++i) {
          canvas.width = (50+i*97)%1000;
          canvas.height = (50+i*97)%1000;
        }

Live example

• https://jsfiddle.net/jfbt6zxa/4/

Expected behavior

The page is not crashed

Screenshots

Platform:

• Device: [iPad]
• OS: [iOS 14]
• Browser: [Chrome, Safari]
• Three.js version: [121]

[Mugen87]

Can you please describe a bit how you have encountered this issue?

[Okavango]

Our application started to crash after several user manipulations

[Mugen87]

Why do these user manipulations trigger a canvas resize?

[Okavango]

We have several canvas panels, user switch on/off some of them => the size of others is changed
Does this information really help you ? ))

[Mugen87]

Well, I just try to understand how so many canvas resizes occur. If possible it's good to avoid them.

I'm afraid your fiddle is not 100% valid since both test cases are not comparable. The canvas of THREE.WebGLRenderer is attached to a WebGL rendering context which is not true for your plain canvas. Please try it again with this fiddle:

https://jsfiddle.net/5an01w6d/

If the crash also occurs with the plain canvas now, you have to report this issue to Apple instead.

[Okavango]

Yes, it crashes with no Three.js
I'll report it to Apple
Thanks )

[rocifra]

We experience the same problem in our app since IOS 14 (Android working fine). Of course there is always the hot topic of "but what's your use case" with the general conclusion "you're holding it wrong" :).
Our use case is :

• we load a bunch of 3d objects
• we generate an UI for drag and dropping them in the scene later on. To generate the UI we need to populate it with thumbnails of our 3d objects so as soon as we load them we iterate them, setup a special scene and snapshot our 3d objects each generating a small thumbnail canvas element to populate our UI drag sidebar.

Edit: I understand this is an Apple problem...so i'll report to them.