CSS Zoom put the mess with the hover

[romaingazielly]

Expected Behavior

When I'm using the CSS property zoom: 2; the hover elements of my canvas should be sync with the canvas element.

Current Behavior

If I'm applying zoom:2; the hover is desynchronized from the canvas element

Possible Solution

Steps to Reproduce (for bugs)

1. Generate your Chart graphic
2. Add to the container the css property: "zoom: 2;"
3. Hover the different parts of the canvas to constat it's no sync anymore

Context

The Zoom property is mostly used for having a nice behavior on all the screens (responsive).
In my case, I was implementing Chart.js to the Reveal.js framework (a presentation framework).

Environment

• Chart.js version: 2.9.3
• Browser name and version: All
• Link to your project: https://revealjs.com/

[mbotsch]

I ran into the same problem and can hence confirm it. It would cool to find a solution!

[mbotsch]

The problem is that the mouse position has to be scaled by the inverse CSS zoom. You can fix it by injecting this piece of code into line 107 of helpers.dom.js, i.e., after determining mouseX and before considering padding:

        // Take into account CSS zoom on some parent element.
        // Zoom is used, e.g., by Reveal.js.
        var zoom = 1;
        for (var elem=canvas; elem; elem=elem.parentElement) {
            zoom *= elem.style.zoom || 1
        }
        if (zoom != 1) {
            mouseX = mouseX / zoom;
            mouseY = mouseY / zoom;
        }

Maybe a maintainer can turn this into a pull request, since they know better how those should look like?

[etimberg]

Can confirm this is still broken in v3.0.0-beta.9 however the CSS zoom feature is non-standard and not on the standards track according to https://developer.mozilla.org/en-US/docs/Web/CSS/zoom so I don't think we should fix this.

@kurkle thoughts?

[kurkle]

I don't think we should add such code in core. You can do it in a plugin: https://jsfiddle.net/85f41yra/

[fedehann]

The "zoom" property is now part of baseline for all the major browsers since May 2024 (https://developer.mozilla.org/en-US/docs/Web/CSS/zoom). Can we reopen this issue?

[ninon69004]

The zoom property is part of the Baseline 2024.
Since May 2024, this feature works across the latest devices and browser versions.
Please address this issue.