apache / echarts

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

[Bug] Tooltip Text is Blurry on Chrome due to use of translate3d for positioning #17544

Open andyboyne opened 2 years ago

andyboyne commented 2 years ago

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

Implement a custom tooltip. Interact with the chart, quite often the text is blurry. This is down to the use of translate3d for absolute positioning of the tooltip div element. Can we have an option to just use top/left absolute positioning instead?

Current Behavior

Blurry tooltip text in chrome

Expected Behavior

Non blurry text

Environment

- OS: Win 10
- Browser: Chrome 104.0.5112.81
- Framework: n/a

Any additional comments?

No response

plainheart commented 2 years ago

Could you provide some screenshots for comparison? Is always blurry or only when moving?

andyboyne commented 2 years ago

The problem seems to be chrome's anti-aliasing when you have non-white colours on a dark background. For example, I took one of the 'example' charts from the playground site and modified it like so:

option = { title: { text: 'Stacked Area Chart' }, tooltip: { backgroundColor: 'black', textStyle: { color: 'orange', fontSize: 11 }, trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Email', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: 'Total', label: { show: true, position: 'top' }, areaStyle: {}, emphasis: { focus: 'series' }, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] };

... copy that into the online 'examples' editor.

If you move the mouse around and then stop, you will notice that quite often the text is blurred. Not always, but quite often.

plainheart commented 1 year ago

Try to add transform-style: preserve-3d to the tooltip style and check if the text will be still blur.