Virtual WebGL Workaround Fails On 3d Plots

[robertclaus]

Plotly's documentation recommends using the virtual-webgl script to support more plots than the browser's WebGL context limit allows. This works great for displaying many large scatter charts, but with this in place 3D plots, surface plots, and mesh3d plots (and likely others) do not seem to render.

https://plotly.com/python/webgl-vs-svg/

[archmoj]

@robertclaus

Could you possibly fork and tweak this codepen to replicate the bug you noticed?

Alternatively you may use fig2pen to convert a python example to codepen.

Please note in both cases you should add the virtual-webgl script in the html before loading the plotly.js script.

Thank you!

[alexcjohnson]

FYI apparently virtual-webgl has compatibility issues with Bokeh too, though I haven't investigated myself holoviz/panel#7375

[gvwilson]

@archmoj just sent you a slack - please dive into this one.

[samhinshaw]

@archmoj I have not been able to reproduce it in codepen yet. I am going to see if I can isolate any further differences between codepen and the environment we are experiencing the bug in.

Two attempts:
https://codepen.io/samhinshaw/pen/QwLKdjZ
https://codepen.io/samhinshaw/details/EaYgZyj

[samhinshaw]

Ah. I figured it out.

From this thread:

this error hints that at the moment when WebGL is initialized, the canvas size is 0 pixels.

Our layouts do not have width & height set. If we set them explicitly in the layout, the chart renders.

Before	After

[samhinshaw]

@archmoj Here is a codepen reproducing the bug: https://codepen.io/samhinshaw/pen/gbYwgvz

The root cause appears to be specific interactions with flexbox and the parameter responsive = True

[archmoj]

Thank you @samhinshaw for the replicating the bug 🙏
Since this seems like a browser specific bug, I am wondering if you could possibly add a workaround for this in place?

[archmoj]

@gvwilson FYI - samhinshaw and I are now working together a fix at plotly.js level at our Vancouver office.
After that, I should release a plotly.js release candidate patch (v3.0.0-rc.2) to help close this ticket as soon as possible.

[archmoj]

@samhinshaw
When opening the new issue at plotly.js level please use the simplified version of codepen (i.e. without importing react, etc.) and use the latest official version of plotly.js v2.35.2 instead of the RC of v3.
Thank you! 🙏