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

[AliMMehr]

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:

[archmoj]

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

[AliMMehr]

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.

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.

[archmoj]

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?

[AliMMehr]

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."

[archmoj]

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.

[AliMMehr]

No, interestingly I don't get any errors regarding that. I only get the following message:

But this error shows in all Plotly.com webpages.

[smeingast]

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

[alexcjohnson]

@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.

[andrew-saydjari]

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.

[sthair]

Hello,

I have a MacBook Pro, OS BigSur 11.4, Safari v.14.1.1.
I am having the exact same issue as above with plotly 3D scatterplot
.html exported from
Rstudio 1.4.1717 (R version "Kick Things" 4.1.1 (2021-08-10))
Plotly v 4.9.4.1

Plot grid axes show, the hover feature picks up the x,y,z but the data is invisible.

Plots work perfectly in Mozilla Firefox and also work just fine on my other Mac computer (Safari is thankfully still 13.1)

Problem for Safari 14.1.1 is solved by setting opacity = 1 as described above, however that is not a solution for what I need to present...

Any solutions beyond instructing all who may use to install Mozilla etc etc and abandon Safari?

Apologizes if this needs to be a "new issue" but since it is identical to this thread I thought I would start here.. as this and #5351 appear to be closed..

Cheers!

[sthair]

PS. Reproducible example (given the user has Safari 14.1.1)...

as per:
#https://plotly.com/r/3d-line-plots/

BASIC LINE PLOT

data1 <- read.csv('https://github.com/raw/plotly/datasets/master/3d-line1.csv')
head(data1)

data1$color <- as.factor(data1$color)
table(data1$color)

plot_ly(data1, x = ~x, y = ~y, z = ~z,
type = 'scatter3d',
mode = 'lines',
opacity = 1,
line = list(width = 6, color = ~color, reverscale = FALSE)) #WORKS IN SAFARI 14

plot_ly(data1, x = ~x, y = ~y, z = ~z,
type = 'scatter3d',
mode = 'lines',
opacity = 0.6,
line = list(width = 6, color = ~color, reverscale = FALSE)) #DOES NOT WORK IN SAFARI 14