Bug 284281 – Canvases are not removed from Inspector Graphics tab when they're removed from the DOM

• Component: Web Inspector
• Status: NEW

Created attachment 473508 [details]
Graphics tab recording of Threejs examples

When debugging an issue within my own project I noticed a lot of canvasses stayed in memory in Safari. I clean up most of the canvasses used in this project by setting them to a size of 1 by 1 so they won't allocate a lot of memory, eventually these also will get cleaned up by the garbage collector. Like described in this article: https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit/

I noticed the canvas that was attached to the DOM using WebGL2 is also staying in memory. It stays visible in the Graphics tab in Safari and it won't be garbage collected. We have cases in our website where iOS users get a crash, meaning the current browser tab will refresh. This seem to only happen on an iPhone, not on a Macbook and not on an iPhone simulator as far as I could reproduce.

I attached a video of the Graphic tab recording some interactions with the threejs examples on https://threejs.org/examples/

Related threejs github issue: https://github.com/mrdoob/three.js/issues/30047

[Alexey Proskuryakov]

Thank you for the report. Could you please specify which version(s) of Safari you are observing this with?

(In reply to Alexey Proskuryakov from comment #1)
> Thank you for the report. Could you please specify which version(s) of
> Safari you are observing this with?

The video recorded is using an iOS simulator 18.1.

But I can confirm this also happens on Version 18.1.1 (20619.2.8.11.12) on my MacBook.

[Radar WebKit Bug Importer]

<rdar://problem/141535067>

[Kimmo Kinnunen]

This is a web inspector problem.
Also, when selecting "Log canvas context" using the </> button, the web content process will crash.

[Anuj Panta]

Pull request: https://github.com/WebKit/WebKit/pull/54593