Open andyboyne opened 2 years ago
Could you provide some screenshots for comparison? Is always blurry or only when moving?
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.
Try to add transform-style: preserve-3d
to the tooltip style and check if the text will be still blur.
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
Any additional comments?
No response