From eb6af35fbea5dab497da3a0ac3d380c47b0f6b16 Mon Sep 17 00:00:00 2001 From: plainheart Date: Sun, 25 Apr 2021 15:24:29 +0800 Subject: [PATCH 1/3] fix(tooltip): tooltip(especially in connected chart) may be lagged and shake from side to side in Chrome(with the devtools open) and Firefox. see #14695. --- src/component/tooltip/TooltipHTMLContent.ts | 2 +- src/component/tooltip/TooltipView.ts | 16 ++- test/tooltip-lag-glitch.html | 121 ++++++++++++++++++++ 3 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 test/tooltip-lag-glitch.html diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts index ecd432fdd1..7d70c1b36d 100644 --- a/src/component/tooltip/TooltipHTMLContent.ts +++ b/src/component/tooltip/TooltipHTMLContent.ts @@ -100,7 +100,7 @@ function assembleTransition(duration: number, onlyFade?: boolean): string { if (!onlyFade) { transitionOption = ` ${duration}s ${transitionCurve}`; transitionText += env.transformSupported - ? `,${TRANSFORM_VENDOR}${transitionOption}` + ? `,${CSS_TRANSFORM_VENDOR}${transitionOption}` : `,left${transitionOption},top${transitionOption}`; } diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts index 93949fce24..78c0ef5bff 100644 --- a/src/component/tooltip/TooltipView.ts +++ b/src/component/tooltip/TooltipView.ts @@ -57,6 +57,7 @@ import { DataByCoordSys, DataByAxis } from '../axisPointer/axisTrigger'; import { normalizeTooltipFormatResult } from '../../model/mixin/dataFormat'; import { createTooltipMarkup, buildTooltipMarkup, TooltipMarkupStyleCreator } from './tooltipMarkup'; import { findEventDispatcher } from '../../util/event'; +import { throttle } from '../../util/throttle'; const bind = zrUtil.bind; const each = zrUtil.each; @@ -166,6 +167,8 @@ class TooltipView extends ComponentView { private _lastDataByCoordSys: DataByCoordSys[]; + private _updatePosition: ReturnType | TooltipView['_doUpdatePosition']; + init(ecModel: GlobalModel, api: ExtensionAPI) { if (env.node) { return; @@ -213,6 +216,17 @@ class TooltipView extends ComponentView { this._initGlobalListener(); this._keepShow(); + + // PENDING + // `mousemove` event will be triggered very frequently when the mouse moves fast, + // which causes that the updatePosition was also called very frequently. + // In Chrome with devtools open and Firefox, tooltip looks lagged and shaked around. See #14695. + // To avoid the frequent triggering, + // consider throttling it in 50ms. (the tested result may need to validate) + this._updatePosition = + this._renderMode === 'html' + ? throttle(bind(this._doUpdatePosition, this), 50) + : this._doUpdatePosition; } private _initGlobalListener() { @@ -840,7 +854,7 @@ class TooltipView extends ComponentView { } } - private _updatePosition( + private _doUpdatePosition( tooltipModel: Model, positionExpr: TooltipOption['position'], x: number, // Mouse x diff --git a/test/tooltip-lag-glitch.html b/test/tooltip-lag-glitch.html new file mode 100644 index 0000000000..c721f41aac --- /dev/null +++ b/test/tooltip-lag-glitch.html @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + +
+
+ + + + + From 2b46ae9799ae60dde965fc3bfde9ef192d1b83a3 Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 7 Sep 2021 09:32:27 +0800 Subject: [PATCH 2/3] fix(test): use simpleRequire for tooltip-lag-glitch.html. --- test/tooltip-lag-glitch.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/tooltip-lag-glitch.html b/test/tooltip-lag-glitch.html index c721f41aac..21176a8c98 100644 --- a/test/tooltip-lag-glitch.html +++ b/test/tooltip-lag-glitch.html @@ -23,7 +23,7 @@ - + From f4590f1d711747b141c71cd8419fd63cfe73494d Mon Sep 17 00:00:00 2001 From: plainheart Date: Tue, 7 Sep 2021 09:40:34 +0800 Subject: [PATCH 3/3] fix(test): fix typos in tooltip-lag-glitch.html. --- test/tooltip-lag-glitch.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/tooltip-lag-glitch.html b/test/tooltip-lag-glitch.html index 21176a8c98..d5cf6a0874 100644 --- a/test/tooltip-lag-glitch.html +++ b/test/tooltip-lag-glitch.html @@ -97,7 +97,7 @@ var chart1 = testHelper.create(echarts, 'main0', { title: [ - 'Tooltip shouldn\'t shakes or lags', + 'Tooltip shouldn\'t shake or lag', '1) Chrome with the devtools open', '2) Firefox' ], @@ -106,7 +106,7 @@ var chart2 = testHelper.create(echarts, 'main1', { title: [ - 'Tooltip shouldn\'t shakes or lags', + 'Tooltip shouldn\'t shake or lag', '1) Chrome with the devtools open', '2) Firefox' ],