Canvas get's blank after applying/removing CSS 'display: none' to wrapper element

[StefanThumann]

To show/hide the 3D viewer on a page I am using the CSS property "display: none" on the wrapper

container.

When removing the "display: none" attribute the canvas is blank white. Is there are workaround to this problem? Do I have to re-init the plugin in that case?

[WoodNeck]

Hello @StefanThumann.

This seems to be a bug in View3D. If the canvas size goes to zero in any way, like setting its width to 0, it seems like View3D can't render anymore. I've also tried it with three.js, which is the backbone of View3D, and it doesn't seem to have the same issue, so there must be something wrong with our library logic.

I'll take a look at this issue. Until a bug fix is released, you can use a CSS property like visibility: hidden, or you can set the size of the canvas to 1 * 1. Of course, in this case, you can use something like setting position: absolute on the container element to hide it from the layout.

[StefanThumann]

Using the CSS Class view3d-1by1 does make no difference. And the .view3d-canvas Class is has position absolute by default. The only thing that works is visibilty: hidden. Is there a way to re-init the plugin?

[WoodNeck]

I mean, setting the canvas(or container element)'s size to 1 * 1. Not its ratio to 1by1. Like,

.view3d-canvas.invisible {
  width: 1px;
  height: 1px;
}

And, the position: absolute should be applied to the container(.view3d-wrapper) element. But, it depends on how your other CSS is applied to those elements, that's needed because both visibility: hidden and width: 1px occupy some size within their layout.

You can reinitialize View3D by calling view3d.destroy() and then creating another instance of View3D if you're not using frameworks like React. If you're using a framework, you can try changing the key prop of the component.

[WoodNeck]

Fixed in v2.10.1