Visual artifacts for line & radar charts on Firefox for Android #12045
Description
Expected behavior
Charts are rendered properly, without any visual artifacts
Current behavior
Charts are rendered with flickering lines and areas
To me it seems this is most (or only) noticeable when:
- line / radar charts are used
- a background color is set for the datasets
- smooth lines increase the likelihood
- the chart (or its data) is updated in some way
- the chart contains a lot of data
Screenshot:
Video:
https://github.com/user-attachments/assets/cd7d21dd-f7b9-4a6e-8438-46d1707f04a8
Reproducible sample
https://www.chartjs.org/docs/latest/samples/other-charts/radar.html
Optional extra steps/info to reproduce
On Firefox for Android; other browsers and devices don't seem to be affected (?)
- Open https://www.chartjs.org/docs/latest/samples/other-charts/radar.html
- Tap "Add Dataset" and "Add Data" a lot of times
- Tap "Randomize" multiple times
Possible solution
No response
Context
This issue was originally noticed in rust-lang/crates.io#9656 (see comments there for other users confirming it)
Interestingly though, the charts on crates.io seem to be affected slightly differently by this bug:
- the bug occurs when swiping over the chart to move the tooltip; for the chartjs.org sample I am seeing this as well but less common and not as extreme
- the rendering glitch seems to be persistent (?), for example the chart of https://crates.io/crates/struson at the bottom already shows these issues without any interaction (might not be reproducible when the data changes in the future)
Not sure if there is an additional issue with how crates.io is integrating the charts.
chart.js version
v4.4.8
Browser name and version
Firefox 136.0; Android 13
Link to your project
No response