切换浏览器标签页后切换回来后图表显示空白 #3811

ckvv · 2022-02-16T07:22:30Z

I have searched the issues of this repository and believe that this is not a duplicate.

切换浏览器标签页后切换回来后图表显示空白，鼠标hover后才显示

Reproduction

https://codepen.io/chenkai0520/full/OJjGEQK

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>折线图-issue</title>
</head>

<body>
  <div id="container" style="width: 1079px; height: 312px;"></div>
  <script src="https://gw.alipayobjects.com/os/lib/antv/g2/4.1.32/dist/g2.min.js"></script>
  <script>
    const data = [{
        date: '2021-11-19',
        value: 995.023
      },
      {
        date: '2021-11-18',
        value: 1021.899
      },
      {
        date: '2021-11-17',
        value: 948.366
      },
      {
        date: '2021-11-16',
        value: 947.162
      },
      {
        date: '2021-11-15',
        value: 1003.01
      },
      {
        date: '2021-11-14',
        value: 1072.513
      },
      {
        date: '2021-11-13',
        value: 1164.065
      }
    ];
    const chart = new G2.Chart({
      container: 'container',
      autoFit: true,
    });

    chart.data(data);
    chart.scale({
      date: {
        range: [0, 1],
      },
      value: {
        min: 0,
        nice: true,
      },
    });

    chart.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
    });

    chart.line().position('date*value').label('value');
    chart.point().position('date*value');
    chart.render();
  </script>
</body>

</html>

Environment	Info
g2	4.1.34
System	MacBook Pro (13-inch, 2020, Two Thunderbolt 3 ports)
Browser	Google Chrome 版本 98.0.4758.80（正式版本） (x86_64)

ckvv · 2022-02-16T07:36:55Z

有可能是浏览器的原因，这个问题我只在谷歌浏览器上复现了

visiky · 2022-02-16T08:05:19Z

我在 chrome 似乎没问题（可能我没有升级 chrome）

ckvv · 2022-02-16T08:08:04Z

@visiky 是Chrome的问题，echarts 也发现了同样的问题, 包括下面的代码在浏览器中切换标签页后也不正常

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
</script>
</html>

ckvv · 2022-02-16T08:12:49Z

我向chrom报告了这个bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1297918#c_ts1644998466

ckvv changed the title ~~4.1.34~~ 切换浏览器标签页后切换回来后图表显示空白 Feb 16, 2022

ckvv closed this as completed Feb 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

切换浏览器标签页后切换回来后图表显示空白 #3811

切换浏览器标签页后切换回来后图表显示空白 #3811

ckvv commented Feb 16, 2022 •

edited

ckvv commented Feb 16, 2022

visiky commented Feb 16, 2022

ckvv commented Feb 16, 2022 •

edited

ckvv commented Feb 16, 2022

切换浏览器标签页后切换回来后图表显示空白 #3811

切换浏览器标签页后切换回来后图表显示空白 #3811

Comments

ckvv commented Feb 16, 2022 • edited

Reproduction

ckvv commented Feb 16, 2022

visiky commented Feb 16, 2022

ckvv commented Feb 16, 2022 • edited

ckvv commented Feb 16, 2022

ckvv commented Feb 16, 2022 •

edited

ckvv commented Feb 16, 2022 •

edited