bug in 3D controls on Safari

Descrizione

NOTE: I found this issue not reproducible when using JSFiddle or on the website example. Therefore, I assume it is related to the entire structure of the DOM and not just on the elements created by Plotly.

When creating a 3D plot and rendering it in Safari, the controls are way too sensitive. Moreover, they respond to single click events, not just to drag events, making them basically useless. The same webpage loaded in Chrome shows no issues.

See attached GIFs.:

SAFARI
plotly_safari

CHROME
plotly_chrome

Source code:

index.html

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="plotly-prova" style="width:100%; height:100%" style="margin: auto;"></div>

    <!---<script src="cdn/plotly-2.27.0.min.js" charset="utf-8"></script>--->
    <script src="https://cdn.plot.ly/plotly-2.27.1.min.js" charset="utf-8"></script>
    <script src="/gridstack-example.js"></script>

</body>

</html>

index.css

body {
    background-color: #222222;
    color: white;
}

gridstack-example.js - ignore the name. This is the same example that is on Plotly.js webpage.


TESTER = document.getElementsByClassName('plotly-prova')[0]

var pointCount = 31;
var i, r;

var x = [];
var y = [];
var z = [];
var c = [];

for(i = 0; i < pointCount; i++) 
{
   r = 10 * Math.cos(i / 10);
   x.push(r * Math.cos(i));
   y.push(r * Math.sin(i));
   z.push(i);
   c.push(i)
}

Plotly.newPlot(TESTER, [{
  type: 'scatter3d',
  mode: 'lines+markers',
  x: x,
  y: y,
  z: z,
  line: {
    width: 6,
    color: c,
    colorscale: "Viridis"},
  marker: {
    size: 3.5,
    color: c,
    colorscale: "Greens",
    cmin: -20,
    cmax: 50
  }},                  
]);

Using Safari 17.1 (19616.2.9.11.7) on MacOs 14.1.

Come iniziare

Leggi tutta la issue e poi la guida ai contributi del progetto.

Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.

Fai un fork del repository e lavora su un branch.

Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con la riproduzione fornita in index.html e gridstack-example.js, concentrandoti sulla chiamata a Plotly.newPlot per il grafico scatter3d in Safari 17.1 su macOS 14.1. Confronta il comportamento dei controlli al clic singolo e al trascinamento con quello di Chrome usando le GIF e l’esempio forniti. Il lavoro è completato quando i controlli 3D in Safari non reagiscono più in modo eccessivo né ai clic singoli, mantenendo al contempo il normale comportamento di trascinamento.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico

javascript

Ambito

data-visualization, frontend

Tipo di issue

Bug

Difficoltà

4/5

Tempo stimato

3-5 giorni

Stato di attività

Ferma

Chiarezza

Abbastanza chiara

Idoneità per principianti

42/100

Descrizione

Guida per i contributori

Come iniziare

Direzione di ricerca

Valutazione

Ricevi le nuove issue nella tua casella