Babylon does not load properly when loaded onto display:none div

Using babylonjs 4.1.0.

When i attempt to initialize the babylonjs renderer onto a hidden canvas, the camera does not seem to initialize properly. No errors in log.

Cannot reproduce in playground i think because the canvas is always there, but attached reproducible project. (3.7 KB)

same with 4.2?

It does load, but is crazy pixellated until I resize the screen.

Is there any sort of workaround i can do in 4.1? We can’t update our platform to 4.2 until its out of beta and we have clients asking (mostly they want to use in a bootstrap modal and pre-initialize before modal is displayed, so cant just use css visibility since thats not what bootstrap uses).

are you making sure the canvas.width and height are set to the correct size?
4.2 is REALLY stable to be honest

Do canvas width and height need to manually set?

Also, although it may be very stable, we use a lot of custom shaders, so upgrading is always a more involved process than just updating the package.json. Something we can start looking into though.

yes if the canvas is not in the DOM (as we don’t have a clientWidth and clientHeight for it)
The best idea is to add it anyway to the dom but make it display: none

Sorry, may have miscommunicated something; the canvas is in the DOM. It is just display:none.

ok can you try with visibility change then? (the goal is to give it a client size)

Doing visibility works. That’s what they were complaining about, they wanted to be able to use bootstrap/jquery modals that use display:none instead. It’s fine, I can just tell them to wait to initialize the engine until after modal shows for first time.

Do you think that getting rid of the fuzzy-ness is in scope for 4.2.0?

well there is no fuzzy ness for me :slight_smile: the engine will set the size to the canvas client width and height :wink:

For 4.2 we support OffscreenCanvas though which will be better for your use case:

1 Like

What if canvas width and height is dynamic?

you just need to call engine.resize() every time