[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.