Background glitch on line chart with segments and gradient

[devmount]

Expected Behavior

When using a line chart with a gradient for backgroundColor and a dashed segment for the last segment of the chart, I expect the background to only fill the area below the line, no matter what size the chart has.

Current Behavior

Currently I experience a strange behavior here: As soon as I resize the chart smaller than a mysterious threshold (e.g. in my case <= 500px), the background glitches out of the line border to a triangle shape.

Possible Solution

I have no idea 🙈 But I tested that this bug DOESN'T occur if...

• I don't use segments
• I don't use the alignToPixels option as provided as an answer in Line chart segments cause gaps in colored background #9022

Steps to Reproduce

1. Open https://codepen.io/devmount/pen/KKWPMdZ
2. Set the view mode in Codepen to vertical (if not already set)
3. Resize the viewport of the chart so see the bug

Context

In my ThirdStats Thunderbird add-on, I'm visualizing email counts with Chart.js and I wanted to have those beautiful background gradients as well as make the last segment dashed to show, that the data in this segment isn't complete yet. That was when I found this bug:

Environment

• Chart.js version: 3.2.0
• Browser name and version: Latest Firefox, Chrome, Opera, Edge (any, I assume...)
• Link to your project: https://github.com/devmount/third-stats

[devmount]

Thanks a lot!