plotly / plotly/plotly.js

bug in 3D controls on Safari

Offen
#6,815 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P3
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der bereitgestellten Reproduktion in index.html und gridstack-example.js und konzentriere dich auf den Aufruf von Plotly.newPlot für das scatter3d-Diagramm in Safari 17.1 unter macOS 14.1. Vergleiche das Verhalten der Steuerelemente bei Einzelklicks und beim Ziehen mit Chrome anhand der bereitgestellten GIFs und des Beispiels. Als abgeschlossen gilt die Aufgabe, wenn die 3D-Steuerelemente in Safari nicht mehr übermäßig oder auf Einzelklicks reagieren und dabei das normale Verhalten beim Ziehen erhalten bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.