bug in 3D controls on Safari

説明

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.

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。

着手することを issue にコメントします — 二人が同じ作業をするのを防げます。

リポジトリをフォークし、ブランチを切って変更します。

issue 番号を参照したプルリクエストを送ります。

調査の方向性

提供された index.html と gridstack-example.js の再現コードから始め、macOS 14.1 上の Safari 17.1 における scatter3d チャート用の Plotly.newPlot 呼び出しに注目してください。提供された GIF と例を使って、コントロールのシングルクリック時およびドラッグ時の動作を Chrome と比較してください。Safari で 3D コントロールが過剰に反応したりシングルクリックに反応したりしなくなり、通常のドラッグ動作が維持されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック

javascript

領域

data-visualization, frontend

issue の種類

バグ

難易度

4/5

見積もり時間

3〜5日

活発さ

停滞

明瞭さ

おおむね明確

初心者へのやさしさ

42/100

説明

コントリビューションガイド

はじめの一歩

調査の方向性

評価

新しい issue をメールで受け取る