Plotly.js: 3D plots not showing on Safari Version 14.0 when there is transparency in the scene

Created on 20 Sep 2020  路  9Comments  路  Source: plotly/plotly.js

After updating Safari to version 14.0, you can visit https://plotly.com/javascript/3d-mesh/ and observe the empty 3D scatter plots as follows:
image

bug

Most helpful comment

This problem persists for me in Safari 14.0.1 (16610.2.11.51.8) and MacOS 11.0.1 BigSur. It also interferes with PollEverywhere rendering the html in powerpoint presentations.

The problem interestingly does not appear when I use Safari 14 on an iPhone.

All 9 comments

Thanks for the report. Which OS & device you are using?

Thank you. I am using macOS Catalina 10.15.6 on MacBook Air Retina, 13-inch, 2018. The Safari is Version 14.0 (15610.1.28.1.9, 15610). I want to mention that hover text works on the vertices as follows although the mesh is invisible.
image
I updated Safari on Sep 18, 2020 when it suggested to update through the macOS builtin software update in system preferences.
On this same device, the 3D meshes on https://plotly.com/javascript/3d-mesh/ can be seen fine one Google Chrome.

Hmm... browserstack is still on v13 not v14.
So at the moment it is not possible to debug it there.
@alimm1995 could you also try other 3d traces e.g. surface and scatter3d with your device?

The surface plots on https://plotly.com/javascript/3d-surface-plots/ are good. The scatter3d on https://plotly.com/javascript/3d-scatter-plots/ doesn't show.
Sorry for mentioning this detail now, but I just realized that while the first two 3D meshes on https://plotly.com/javascript/3d-mesh/ don't work, the last two meshes on this page work. So I _can_ see the plots under "3D Mesh Tetrahedron" and "3D Mesh Cube," but I _can't_ see the plots under "Simple 3D Mesh Plot" and "3D Mesh Plot with Alphahull."

And I expect you get some warnings in the console e.g.

'webgl setup failed possibly due to disabling/enabling preserveDrawingBuffer config.'

If that is the case I think this should be addressed in is-mobile module to support Safari v14.

No, interestingly I don't get any errors regarding that. I only get the following message:
image
But this error shows in all Plotly.com webpages.

Jumping in here because I just encountered the same issue. I managed to "fix" it by setting the opacity of the lines to 1.0. If I set the opacity to anything below 1 (e.g. 0.99), the lines won't show in Safari 14.0

@archmoj FYI I also see this bug in Safari 14, on Mac OS 11.0.1 Big Sur. No messages show up in the console.

This problem persists for me in Safari 14.0.1 (16610.2.11.51.8) and MacOS 11.0.1 BigSur. It also interferes with PollEverywhere rendering the html in powerpoint presentations.

The problem interestingly does not appear when I use Safari 14 on an iPhone.

Was this page helpful?
0 / 5 - 0 ratings