Could not render a-sky image after hiding it initially with display:none

Question

I'm trying to toggle display property between div with d3 graph and a-scene. If I set a-scene to display: hidden and then toggle it, the a-scene seems to load but a-sky does not show the image on toggle. However if I load the a-scene first and then toggle to d3 graph it seems to work. I've also tried to set height and width to .a-canvas on toggle. I want to load the d3 graph first and then toggle to a-scene.

Here is the demo glitch for it. Found one similar question here, and its answer does not help.

Answer 1

You can play with position and visibility attribute instead of display. Have look at this glitch remixed with your glitch. https://glitch.com/edit/#!/humorous-camp Hope this helps you.