scattergl markers rendering incorrectly with time series data

[nickmzero]

Noticing some unexpected behavior with time series data using scattergl. The markers are rendering off the lines at seemingly regular intervals: (this example has ~800k points)

Reproducible example
shows scatter and scattergl side-by-side with the same date values: https://codepen.io/nickmzero/pen/KKqLOGv

After briefly playing around with the dates in the codepen, it seems like the markers fail to correctly render on the line unless there's a day between points.

[AlanJMac]

We have started to see this same behaviour on all browsers for certain MacBooks using the M1 chip.
A particular setup we have that exhibits this behaviour is a MacBook Air, OS Monterey 12.3.1, M1 chip.
It has also been seen on OS 12.3.2 and 12.4.

The scatter plots render fine, but the markers in scattergl plots render vertically.

This appears to be the same issue reported in the community forums:

• https://community.plotly.com/t/webgl-scatter-plots-not-rendering-on-new-m1-mac-in-chrome-or-safari/61397
• https://community.plotly.com/t/plotly-fails-when-using-scattergl-and-value-greater-than-2-24-only-on-m1-chip/61927

The issue presents itself for scattergl plots with x-axis values greater than 2^24 (e.g. date values)
And can be confirmed by the following example: https://codepen.io/alanjmac/pen/jOzbMVw

(Edit: I noticed that https://cdn.plot.ly/plotly-latest.js currently points to "plotly.js v1.58.5" so I have updated the codepen to use https://cdn.plot.ly/plotly-2.12.1.js instead - issue is still seen).

[chipkent]

Has this been resolved? Is there any plan to address it?

[jklimke]

For me this is also a quite big problem. Is there any idea how to fix this or maybe a workaround ?

[AlanJMac]

I'm not sure if there is a fix (I tried but it was beyond me) however the following workaround works for me in Chrome:

• in Chrome browser, navigate to chrome://flags/ and search for "ANGLE graphics backend". From the dropdown box select "Metal". (Apparently Open GL has been deprecated in Mac and may contain driver bugs).
  

• in Chrome versions >= 109.0.5414.xx, ensure hardware acceleration is enabled: Go to Settings => System and toggle on "Use hardware acceleration when available". In earlier versions, an alternative workaround was to toggle this to off.

I was unable to find a similar workaround for Firefox.

[sqlAlchemyNoob2004]

has anybody got a workaround for this? seems like plotly doesn't plan to fix this.. do I need to refactor with a different library to handle users on newer macs?

[AlanJMac]

I can confirm this issue appears to be fixed with the latest plotly.js 2.28.0 release!
Many thanks for the solution!

Fix scattergl rendering bug on M1 mac devices [https://github.com//pull/6830],
with thanks to @justinjhendrick for the contribution!

Details of the problem + fix can be found in the similar reported issue: #6820