apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.71k stars 19.62k forks source link

[Bug] The location of the tooltip is not under the mouse-cursor if the document-body is zoomed using CSS-zoom #20350

Open ta834n opened 2 months ago

ta834n commented 2 months ago

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=line-stack

Steps to Reproduce

  1. Go to https://echarts.apache.org/examples/en/editor.html?c=line-stack
  2. Add the following line to the end of the JS-file: document.body.style.zoom = '1.5';
  3. Hover over the chart: the tooltip / cross-hair is not located under the mouse-cursor

Current Behavior

The location of the tooltip is not under the mouse-cursor if the body is zoomed.

Expected Behavior

The location of the tooltip should be under the mouse-cursor if the body is zoomed.

Environment

- OS: Ubuntu 24.04.1 LTS
- Browser: Google Chrome Version 128.0.6613.137 (Official Build) (64-bit)
- Framework: none

Any additional comments?

Since May 2024, CSS zoom is standardized and not depcrecated anymore (see Notes: https://caniuse.com/?search=zoom)

Chrome 128 implements this already, see: https://chromestatus.com/feature/5198254868529152

plainheart commented 2 months ago

Thanks for your report. This is a known issue. We will consider supporting it in future versions.

EB-Teampeak commented 1 month ago

We also ran into this issue, however what is strange that it does not seem to be a problem on mobile (tested via the chrome dev tools mobile view), both the desktop and the mobile views use zoom to some extent in our web app.

@plainheart Is there some code that makes this distinction (presumably because zoom is more prevalent om mobile)?