browser zoom and dom zoom will cause mouse position fault in tooltip

[sheepzheng]

Version

5.1.1

Steps to reproduce

in script use document.body.style.zoom to adapt different size of screen. in echarts option add tooltip. use ctrl in browser to zoom your demo or use different size of screen to display your demo

What is expected?

use document.body.style.zoom and zoom browser will not effect mouse hover position in tooltip

What is actually happening?

you will find mouse hover event will trigger wrong part of this chart's tooltip.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[plainheart]

Thanks for the report. Related to #14253, #13615, #13614, #13606, #12645, #11032, #9310, #8386, #8382, #8286, #6674, #6083, #3635, #3511 etc.
I drafted a solution for this issue before, but it may need some discussion. List it in the 5.x milestone.

[sheepzheng]

I fixed this problem by setting body transform.
In script add:

             var ratioX = window.innerWidth / 1920;//dev screensize echarts instance 
         document.body.style.width = '1920px';//dev screensize echarts instance 
         document.body.style.height = '1080px';//dev screensize echarts instance 
         document.body.style.transform = `scale(${ratioX},${ratioX})`;
         document.body.style.transformOrigin = `0 0`;

then tooltip works right with browser zoom and different sizes of screen

[yushouqing]

i have the same issue. browser zoom changed will cause mouse position fault.