Hey everyone, I’ve been running into a frustrating issue over the past couple of days and would really appreciate some guidance. While working on integrating an interactive 3D metric gauge component for this website, I noticed that the WebGL context frequently crashes whenever users toggle between different tabs or view routes in the dashboard.
The primary issue is that memory usage steadily climbs every time the canvas container mounts and unmounts, eventually triggering a WebGL context lost error in Chrome and Safari. Along with that, when testing on mobile browsers, switching away to another app and coming back leaves the canvas completely blank because the context restored handler fails to properly rebind the textures and render targets without a hard page reload. On top of that, handling container resizes inside a flexible dashboard layout seems to trigger redundant render loops, leading to severe thermal throttling and frame drops on lower-spec laptops.
I have tried traversing the scene to dispose of geometries and materials manually, but it feels like the WebGLRenderer itself or cached render targets are still clinging to GPU memory. Has anyone dealt with similar lifecycle and disposal pitfalls in dynamic single-page applications, and what is the cleanest pattern to ensure complete teardown and reliable context restoration?