Chrome扩展程序弹出窗口在浏览器操作图标点击时随机缩小为不可用的大小

Question

我正在使用反应js＆amp; chart.js在popup.html中呈现一些图表

通常看起来像这样：

但是，有时缩小到无法使用的大小：

这是随机发生的，当它发生时，我在控制台中没有收到任何错误消息。

简化代码：

// App.js
class App extends Component {
  state = {
    token: null
  }
  componentDidMount() {
    chrome.storage.local.get('token', function(result) {
      result && result.token && this.setState({ token: result.token });
    });
  }
  render() {
    return (
      <div>
        {
          this.state.token ?
          <LineChart /> :
          <Placeholder />
        }
      </div>
    )
  }
}

// LineChart.js
class LineChart extends Component {
  componentDidMount() {
    const canvas = document.getElementById('usageChart');
    if (canvas) {
      this.getChartData()
        .then(data => {
          this.chart = new Chart(canvas, {
            type: 'line',
            data,
            options: chartConfig.options
          });
        });
    }
  }
  render() {
    return (
      <canvas id="usageChart" />
    );
  }
}

检查弹出控制台后，在两种情况下都会渲染所有组件，只是弹出窗口缩小而没有任何错误。

我尝试在没有chart.js图表的情况下进行渲染，但这个问题的发生次数较少，但仍然存在。

显然，最好的答案是描述确切根本原因的答案。但是，我甚至不知道如何调试这个并找到这个问题的根本原因？在这方面的任何帮助都会很棒！