bug in 3D controls on Safari

Description

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.

Par où commencer

Lisez l'issue en entier, puis le guide de contribution du projet.

Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.

Forkez le dépôt et travaillez sur une branche.

Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la reproduction fournie dans index.html et gridstack-example.js, en vous concentrant sur l’appel à Plotly.newPlot pour le graphique scatter3d dans Safari 17.1 sous macOS 14.1. Comparez le comportement des contrôles lors d’un clic simple et d’un glissement avec celui de Chrome à l’aide des GIFs et de l’exemple fournis. La tâche est terminée lorsque les contrôles 3D ne réagissent plus excessivement ni aux clics simples dans Safari, tout en conservant le comportement normal de glissement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique

javascript

Domaine

data-visualization, frontend

Type d'issue

Bug

Difficulté

4/5

Temps estimé

3-5 jours

Activité

À l'abandon

Clarté

Plutôt claire

Accessibilité débutants

42/100

Description

Guide de contribution

Par où commencer

Piste de recherche

Évaluation

Recevez les nouvelles issues par e-mail