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.

调研方向

从提供的 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

描述

贡献指南

从这里开始

调研方向

评估

bug in 3D controls on Safari

描述

贡献指南

从这里开始

调研方向

评估

把新 issue 发到你的邮箱