bug in 3D controls on Safari
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
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
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied index.html and gridstack-example.js reproduction, focusing on the Plotly.newPlot call for the scatter3d chart in Safari 17.1 on macOS 14.1. Compare the controls' single-click and drag behavior with Chrome using the provided GIFs and example. Done means 3D controls no longer react excessively or to single clicks in Safari while retaining normal drag behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100