[Bug] Revert to left/top instead of transform to improve the tooltip behavior in Firefox & IE.

[plainheart]

Version

5.2.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/view.html?c=area-stack-gradient

Steps to Reproduce

1. Open the above reproduction example link with Firefox or IE
2. Watch if the tooltip shakes

Current Behavior

The tooltip shakes in Firefox & IE.

Expected Behavior

As the same as Chromium, the tooltip shouldn't shake in Firefox and IE as well.

Environment

- OS: Any
- Browser: Latest Firefox / IE 11

Any additional comments?

The real reason for the shake issue is that the position of the tooltip will be updated in a very short time. We've solved it in #15683 via adding a throttle of 50ms. Thus it's not necessary to use transform to improve performance anymore. And, to make it work smoothly in all common browsers, I'm thinking it's better to revert to left/top.

[plainheart]

@pissang WDYT?

[pissang]

I recorded a video on the FireFox. Is it having the shake issue? I can barely tell the difference.

Screen.Recording.2021-12-21.at.10.31.10.AM.mov

[plainheart]

Thanks for the video. I also test it with Firefox in macOS, it looks good as the same as Chrome. But it works worse in Windows Firefox and IE 11. But IE 11 can work slightly better if the devtools isn't open.

ff.mov

IE11.devtools.open.mov

[pissang]

Looks like a underlying transition issue in browser. If the performance issue described in #14246 is already solved in #15683 . I think it's fine to reverse the position to left/top. Which can also simplify the code.

[pissang]

I've seen using ease-in-out easing(in echarts it's cubicInOut) may have similar lagging behavior when updating the animation frequently. But I'm confusing why left/top behaviors different with transform

[plainheart]

Ahh, I also wonder the reason. 😔 But I've searched many times but found nothing useful. In the old 4.x version, there is no throttle so it looks very laggy when the mouse moves fast, but one good aspect is that it won't shake around. However, in v5, you know, though the transform improves a bit, once it has transition, it will be laggy and shake around if no throttle of 50ms. Moreover, it even behaves differently in different browsers. On the contrary, the previous left/top position appears better for the throttle of 50ms, in the other words, it behaves "better" as its "worse" positioning performance.

[pissang]

What if we still use transform and disable transition in some scenarios? One concern is how should we limit this scenario. for example, only when tooltip is triggered by mouse on the Windows FireFox/ie. Will it be too specific?

[plainheart]

It has no problem if the transition is disabled. But we don't know how it works in other scenarios yet. Good or bad? It may appears to be a bit specific if just only treat Windows Firefox and IE especially.

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!