Skip to content

fix cursor offset inside CSS zoom containers, add syncZoom() API and demo#1131

Open
x2605 wants to merge 1 commit intoleeoniya:masterfrom
x2605:master
Open

fix cursor offset inside CSS zoom containers, add syncZoom() API and demo#1131
x2605 wants to merge 1 commit intoleeoniya:masterfrom
x2605:master

Conversation

@x2605
Copy link
Copy Markdown

@x2605 x2605 commented Mar 24, 2026

fix cursor offset when chart is inside a CSS zoom container

When a parent element has CSS zoom applied (e.g., zoom: 1.5), the cursor crosshair and snap point are offset from the actual mouse position. The offset scales proportionally with the zoom factor.

The root cause is that e.clientX - rect.left gives the offset in zoomed (viewport) pixels, but the overlay element's dimensions are in logical (unzoomed) pixels, so the position mapping is wrong.

The fix divides the offset by the effective CSS zoom, which is computed by walking up the DOM tree and accumulating each ancestor's zoom value. This is recalculated in syncRect(), so it stays in sync on mouseenter, scroll, and resize.

For cases where CSS zoom changes dynamically while the cursor is already over the chart, a new u.syncZoom() method is exposed:

  • u.syncZoom() — auto-detects from the DOM
  • u.syncZoom(1.5) — sets explicitly without DOM traversal

A demo is included at demos/inside-css-zoom.html.

This fix was authored with the help of Claude.

@x2605 x2605 changed the title fix cursor offset inside CSS zoom containers, add setZoom() API and demo fix cursor offset inside CSS zoom containers, add syncZoom() API and demo Mar 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant