"WebGL is not supported by your browser" for scatter3d on Safari 13.3.1 and Chrome 83.0.4103.106

plotly.js
1

I want to add a scatter3d plot to my React Plotly app. But I’m getting “WebGL is not supported by your browser - visit https://get.webgl.org for more info” using the latest Safari and Chrome.

Of course my browsers do support WebGL when I visit https://get.webgl.org, and https://plot.ly/javascript/3d-scatter-plots/ and https://plot.ly/javascript/webgl-vs-svg/ as suggested in https://community.plotly.com/t/ie-11-webgl-is-not-supported-by-your-browser-visit-https-get-webgl-org-for-more-info/32252.

I suspect it has to do with the fact that I’m using import createPlotlyComponent from "react-plotly.js/factory";, which I have to in order to avoid “JavaScript heap out of memory”, as suggested in https://github.com/plotly/react-plotly.js/issues/135#issuecomment-500399098.

Here’s my sandbox link: https://codesandbox.io/s/frosty-robinson-zn9rn

Thank you very much.

Screen Shot 2020-06-23 at 11.17.40
Screen Shot 2020-06-23 at 11.17.403840×2160 524 KB

2

Found a workaround following https://github.com/plotly/react-plotly.js/issues/135#issuecomment-500399098.

Add <script crossorigin src="https://cdn.plot.ly/plotly-latest.min.js"></script> to index.html, and replace import Plotly from 'plotly.js'; with const Plotly = window.Plotly;

It’s like magic to me. If anyone’s willing to explain what happens in the background, or point me to what I should read, I’d deeply appreciate it.