Hey everyone, I am currently working on an interactive 3D node graph using Babylon.js to visualize backlink networks and domain distribution data. We are integrating this visualizer inside an analytics interface alongside our da pa checker tool to give users a dynamic view of authority metrics, but whenever the parent container resizes dynamically within our responsive CSS grid, the canvas intermittently fails to recalculate dimensions and occasionally triggers a WebGL context loss.
I have hooked up engine.resize() to a ResizeObserver and debounced the trigger, yet on lower-powered devices or during rapid window adjustments, the scene freezes or turns completely black instead of restoring smoothly. Has anyone faced similar context restoration issues when embedding Babylon scenes into multi-component data dashboards, and is there a recommended lifecycle pattern to gracefully restore textures and mesh states without forcing a full page reload?
Could you share a minimal reproduction that includes the responsive grid/container CSS, canvas styles, engine initialization, and your ResizeObserver callback? A small CodePen or StackBlitz would be particularly useful here because the surrounding layout may be part of the issue. A simple box scene is enough if it still reproduces.
Please also include your Babylon.js version, affected browser/device, exact steps to trigger the failure, and console warnings/errors.
Babylon normally handles context restoration automatically, provided doNotHandleContextLost hasn’t been enabled and the browser restores the context. To distinguish an actual context loss from a sizing/rendering problem, please log engine.onContextLostObservable and engine.onContextRestoredObservable, alongside the canvas CSS dimensions, its width/height, and window.devicePixelRatio when it fails.
If your dashboard mounts/unmounts the visualizer, please include that lifecycle code too, particularly engine disposal and observer cleanup.