I've created a dashboard-type PWA using Angular and Chart.js. When the app is first rendered, the bar charts always render correctly. However, when the app is "woken up" on a mobile device after being inactive for a while, the chart size is occasionally shrunk by a factor equal to the devicePixelRatio.

For example, the Pixel 5 has a devicePixelRatio of 2.75. When this issue occurs, the charts are 2.75X smaller than normal (see examples below). The shrunken graphs are fully functional (the tooltips work, live refresh works, etc.). They're just smaller.

This behavior is difficult to recreate and has only been observed on Android devices so far. But it's a showstopper issue for an app like this.

This issue is present in both Chart.js 2.x and 3.x. This post from 2014 seems to describe the problem perfectly, but none of the fixes in that thread resolve the issue. It's a responsive app, so hard-coding the canvas width is not a viable option (assuming that would fix the issue).

Here is the HTML code for the canvas:

   <div class="salesbyhour-canvas">
     <canvas #salesByHourChartElement></canvas>
   </div>

And the corresponding CSS:

.salesbyhour-canvas {
  display: block;
  position: relative;
  height: 11rem;
  width: 100%;
}

I currently use responsive: true and maintainAspectRatio: false, although I've tried dozens of combinations of settings without success.

Any idea what might be causing this issue? Is there a way to detect it's happening so I can trigger a chart update / resize – or perhaps even reload the app – to resolve this issue?