# Babylon does not load properly when loaded onto display:none div **URL:** \ **Category:** Bugs\ **Created:** [September 9, 2020, 3:26pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043 "2020-09-09T15:26:25Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 3:26pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/1 "2020-09-09T15:26:25Z")
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. [SandboxBabylon.zip](https://forum.babylonjs.com/uploads/short-url/kmZKpR1H2gczkwR8H5VD1OL8aKw.zip) (3.7 KB) ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 9, 2020, 3:26pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/2 "2020-09-09T15:26:52Z")
same with 4.2? ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 3:31pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/3 "2020-09-09T15:31:37Z")
![tmp](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5e4280f534b85d3c9ebb646e886fc857f9b894a6.jpeg) 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). ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 9, 2020, 3:40pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/4 "2020-09-09T15:40:10Z")
are you making sure the canvas.width and height are set to the correct size? 4.2 is REALLY stable to be honest ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 3:43pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/5 "2020-09-09T15:43:08Z")
Do canvas width and height need to manually set? ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 3:44pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/6 "2020-09-09T15:44:07Z")
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. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 9, 2020, 3:44pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/7 "2020-09-09T15:44:34Z")
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 ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 3:52pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/8 "2020-09-09T15:52:36Z")
Sorry, may have miscommunicated something; the canvas is in the DOM. It is just display:none. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 9, 2020, 3:53pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/9 "2020-09-09T15:53:28Z")
ok can you try with visibility change then? (the goal is to give it a client size) ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 3:59pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/10 "2020-09-09T15:59:14Z")
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. ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 4:04pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/11 "2020-09-09T16:04:03Z")
Do you think that getting rid of the fuzzy-ness is in scope for 4.2.0? ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 9, 2020, 4:19pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/12 "2020-09-09T16:19:09Z")
well there is no fuzzy ness for me 🙂 the engine will set the size to the canvas client width and height 😉 For 4.2 we support OffscreenCanvas though which will be better for your use case: [https://doc.babylonjs.com/how\_to/using\_offscreen\_canvas](https://doc.babylonjs.com/how_to/using_offscreen_canvas) ---
**Author:** ![jekelija](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jekelija/32/5458_2.png) [@jekelija](https://forum.babylonjs.com/u/jekelija)\ **Post date:** [September 9, 2020, 4:59pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/13 "2020-09-09T16:59:25Z")
What if canvas width and height is dynamic? ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [September 9, 2020, 5:15pm UTC](https://forum.babylonjs.com/t/babylon-does-not-load-properly-when-loaded-onto-display-none-div/14043/14 "2020-09-09T17:15:12Z")
you just need to call engine.resize() every time