It’s a WebGL issue, fixed in WebGPU.

Browsers generally only allow a fixed number of WebGL contexts per page. So a generic element effect library has the issue that too many elements some will start losing contexts. The workaround is to just make one large screen size canvas and then figure out where the elements are you need to draw an effect for. now you only have one context drawing all the elements. But, you can’t know where to draw until the browser scrolls and renders so you’re always one frame behind.

https://webgl2fundamentals.org/webgl/lessons/webgl-multiple-...

WebGPU doesn’t have this issue. You can use the same device with multiple canvases

https://webgpufundamentals.org/webgpu/lessons/webgpu-multipl...