Resposive chart infinitely shrinking with certain zoom levels

[CamBurris]

Expected behavior

Responsive chart should be a stable size with all devicePixelRatios.

Current behavior

Chart will infinitely shrink when certain devicePixelRatios are used.

Behavior occurs with a devicePixelRatio of 1.3499999046325684.

The ratio can be achieved naturally by users:

Windows 10
Screen resolution: 1920x1080
Windows resolution scaling: 150%
Chrome zoom level: 90%

Reproducible sample

https://codesandbox.io/p/sandbox/chartjs-responsive-zoom-thccwr

Optional extra steps/info to reproduce

Demo uses css zoom property. Need to use a browser that supports zoom, such as Chrome.

Possible solution

No response

Context

I believe this is the same issue as #10890.

Either the issue was reintroduced or the original fix didn't work for all scenarios.

chart.js version

4.4.1

Browser name and version

Chrome 119

Link to your project

No response

[PabloMartinez-Beemeral]

Same here with 3840x2160 screen, it happen in Edge, Chrome and Brave. But curiosly enough, not in Firefox. It will happen with both 90% and 110% zoom.

[abm0]

Encountered this issue with following versions:

    "chart.js": "4.4.1",
    "chartjs-plugin-annotation": "3.0.1",

[MernaAyman]

hello, I encountered this issue in chart.js v 4.4.3 also, is there any solution or workaround?

[HieroglypH]

I also encountered this problem with Chart.js version 4.4.1.
In my case, the issue occurs only when the zoom level is set to 67%.

I managed to avoid this by setting the aspect-ratio on the wrapper element.
It seems that the problem may be related to handling non-integer pixel heights, which could cause continuous resizing.

[MernaAyman]

I also encountered this problem with Chart.js version 4.4.1. In my case, the issue occurs only when the zoom level is set to 67%.

I managed to avoid this by setting the aspect-ratio on the wrapper element. It seems that the problem may be related to handling non-integer pixel heights, which could cause continuous resizing.

Hello @HieroglypH, I already tried before to add aspect-ratio to the canvas but it doesn't work with both 90% and 125% zoom in chrome. I am using v4.4.3 to create doughnut chart.
Could you please share your fix in detail?

[HieroglypH]

@MernaAyman

Sorry for the late reply.

I set the aspect-ratio not on the canvas, but on the wrapper element.

<div id="chart" class="wrapper">
  <canvas>
</div>

.wrapper {
  aspect-ratio: 1 / 2;
}

If that doesn't resolve the issue, how about setting the height on the wrapper element?

This phenomenon is caused by the canvas resizing itself repeatedly.
When the canvas size is determined by the wrapper element, the height of the canvas can become a non-integer pixel, triggering constant resizing.
Therefore, if the height of the wrapper element is independent of the canvas, it may stop the resizing loop.