Skip to content

Fix for removing erratic jittering during scrolling/zooming #7704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Eroica wants to merge 3 commits into
base: master
Choose a base branch
from
+15 −0
Open

Fix for removing erratic jittering during scrolling/zooming #7704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73cb1e6
Properly set and unset `_replotting` flag during scroll event
Eroica Jan 12, 2026
f340b25
dragbox: Add early return when scrolling multiple subplots
Eroica Feb 3, 2026
c297b51
Draft log for #7704
Eroica Feb 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions draftlogs/7704_fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Fix visual jumps when zooming/scrolling through plots [[#7704](https://github.com/plotly/plotly.js/pull/7704)]
14 changes: 14 additions & 0 deletions src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ var MINZOOM = constants.MINZOOM;
// flag for showing "doubleclick to zoom out" only at the beginning
var SHOWZOOMOUTTIP = true;

// Current (sub)plot that initiated a scroll
let CURRENT_SCROLLING_SUBPLOT = null;

// dragBox: create an element to drag one or more axis ends
// inputs:
// plotinfo - which subplot are we making dragboxes on?
Expand Down Expand Up @@ -467,6 +470,15 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
return;
}

if (CURRENT_SCROLLING_SUBPLOT == null) {
CURRENT_SCROLLING_SUBPLOT = plotinfo.id;
}
// Early exit to prevent jitters if this subplot didn't initiate the scroll
if (CURRENT_SCROLLING_SUBPLOT !== plotinfo.id) {
Copy link
Collaborator

@alexcjohnson alexcjohnson Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIRC this id is just the two axis ids concatenated, like x2y2, yes? What would happen if you put two plot divs next to each other, each with just one x and one y axis, and you do the same kind of move but now from one div to the other? Where I'm coming from is typically we attach state variables like this (and like _replotting) to the div (gd) rather than having a single one for the whole library.

e.preventDefault();
return;
}

clearAndResetSelect();

// If a transition is in progress, then disable any behavior:
Expand Down Expand Up @@ -528,6 +540,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
}

// viewbox redraw at first
gd._fullLayout._replotting = true;
updateSubplots(scrollViewBox);
ticksAndAnnotations();

Expand All @@ -537,6 +550,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
// no more scrolling is coming
redrawTimer = setTimeout(function() {
if(!gd._fullLayout) return;
CURRENT_SCROLLING_SUBPLOT = null;
scrollViewBox = [0, 0, pw, ph];
dragTail();
}, REDRAWDELAY);
Expand Down