Why does a line appear at the top of the line chart only on ios?

[oocheol]

Why does a line appear at the top of the line chart only on ios?

But, This symptom does not appear in Web and Android.

const ctx = document.getElementById('viewFortuneGraph').getContext('2d');
                const ctx2 = document.getElementById('viewFortuneGraph2').getContext('2d');

                const delayBetweenPoints = 25;
                const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
                const animation = {
                    x: {
                        type: 'number',
                        easing: 'linear',
                        duration: delayBetweenPoints,
                        from: NaN,
                        delay(ctx) {
                            if (ctx.type !== 'data' || ctx.xStarted) {
                                return 0;
                            }
                            ctx.xStarted = true;
                            return ctx.index * delayBetweenPoints;
                        }
                    },
                    y: {
                        type: 'number',
                        easing: 'linear',
                        duration: delayBetweenPoints,
                        from: previousY,
                        delay(ctx) {
                            if (ctx.type !== 'data' || ctx.yStarted) {
                                return 0;
                            }
                            ctx.yStarted = true;
                            return ctx.index * delayBetweenPoints;
                        }
                    }
                };

                const gradPhy = ctx.createLinearGradient(0, 0, 0, 100);
                const gradEmo = ctx.createLinearGradient(0, 0, 0, 100);
                const gradIntell= ctx.createLinearGradient(0, 0, 0, 100);

                gradPhy.addColorStop(0, 'rgba(91,227,245,0.2)');
                gradPhy.addColorStop(0.5, 'rgba(91,227,245,0.1)');
                gradPhy.addColorStop(1, 'rgba(91,227,245,0)');

                gradEmo.addColorStop(0, 'rgba(230,143,255,0.2)');
                gradEmo.addColorStop(0.5, 'rgba(230,143,255,0.1)');
                gradEmo.addColorStop(1, 'rgba(230,143,255,0)');

                gradIntell.addColorStop(0, 'rgba(255,230,129,0.2)');
                gradIntell.addColorStop(0.5, 'rgba(255,230,129,0.1)');
                gradIntell.addColorStop(1, 'rgba(255,230,129,0)');

                const gradLinePhy = ctx.createLinearGradient(0, 0, 100, 0);
                const gradLineEmo = ctx.createLinearGradient(0, 0, 100, 0);
                const gradLineIntell = ctx.createLinearGradient(0, 0, 100, 0);

                gradLinePhy.addColorStop(0, '#45FEC5');
                gradLinePhy.addColorStop(1, '#5BE3F5');

                gradLineEmo.addColorStop(0, '#6192FF');
                gradLineEmo.addColorStop(1, '#E68FFF');

                gradLineIntell.addColorStop(0, '#FFE681');
                gradLineIntell.addColorStop(1, '#FF9160');

                let config = {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: conf.text.yourEmotional + ' ' + parseInt(dataChart.nowBio.emotional * 100) + '%',
                            backgroundColor: gradEmo,
                            borderColor:               gradLineEmo,
                            pointBorderColor:          gradLineEmo,
                            pointBackgroundColor:      'white',
                            pointHoverBackgroundColor: gradLineEmo,
                            pointHoverBorderColor:     gradLineEmo,
                            pointHoverBorderWidth: 0,
                            data: dataE,
                            borderWidth: 1.5,
                            pointStyle : "circle",
                            pointBorderWidth:1.5,
                            pointRadius: (a) => a.parsed.x === 16 ? 3 : 0,

                        }, {
                            label: conf.text.yourIntellectual + ' ' + parseInt(dataChart.nowBio.intellectual * 100) + '% ',
                            backgroundColor : gradIntell,
                            borderColor:               gradLineIntell,
                            pointBorderColor:          gradLineIntell,
                            pointBackgroundColor:      'white',
                            pointHoverBackgroundColor: gradLineIntell,
                            pointHoverBorderColor:     gradLineIntell,
                            data: dataI,
                            borderWidth: 1.5,
                            pointStyle : "circle",
                            pointBorderWidth:1.5,
                            pointRadius: (a) => a.parsed.x === 16 ? 3 : 0,
                        }, {
                            label: conf.text.yourPhysical + ' ' + parseInt(dataChart.nowBio.physical * 100) + '% ',
                            backgroundColor: gradPhy,
                            borderColor:               gradLinePhy,
                            pointBorderColor:          gradLinePhy,
                            pointBackgroundColor:      'white',
                            pointHoverBackgroundColor: gradLinePhy,
                            pointHoverBorderColor:     gradLinePhy,
                            data: dataP,
                            borderWidth:1.5,
                            pointStyle : "circle",
                            pointBorderWidth:1.5,
                            pointRadius: (a) => a.parsed.x === 16 ? 3 : 0,
                        }]
                    },
                    options: {
                        animation,
                        elements: {line: {tension: 0.4}},
                        pointRadius: 0,
                        maintainAspectRatio: false,
                        responsive: true,
                        scaleShowGridLines : false,
                        barShowStroke: false,
                        plugins: {
                            legend: {
                                display: false,
                                position: 'bottom',
                                labels: {
                                    boxWidth: 10,
                                    color : "black",
                                    font: {
                                        weight: 'bold',
                                        size : 20
                                    }
                                }
                            },
                            title: {
                                display: false,
                                text: 'Biorytm Line Chart'
                            },
                            tooltip: {
                                display : false,
                                enabled: false,
                                mode: 'point',
                                intersect: false,
                            }
                        },
                        hover: {
                            enabled: false,
                            mode: 'x',
                            intersect: true,
                        },
                        showTooltips: true,
                        scales: {
                            x: {
                                grid: {
                                    drawBorder : true,
                                    borderWidth: 1.5,
                                    color: '#d4d4d4',
                                },
                                display: true,
                                scaleLabel: {
                                    display: false,
                                    labelString: "month",
                                },
                                ticks: {
                                    autoSkip: false,
                                    maxRotation: 0,
                                    maxTicksLimit: 2,
                                },
                            },
                            y: {
                                grid: {
                                    drawBorder : true,
                                    display: false,
                                    borderWidth: 1.5,
                                    color: '#d4d4d4',
                                },
                                display: false,
                                suggestedMin: -100,
                                suggestedMax: 100,
                                scaleLabel: {
                                    display: false,
                                    labelString: 'Value'
                                },
                                ticks: {
                                    maxRotation: 0,
                                    maxTicksLimit: 5
                                }
                            }
                        }

                    }
                };

[kurkle]

Looks lie the gradient is leaking somehow. My bet would be that this is a Safari/ios bug.

Just to make sure, are you using any plugins? Historically some drawing glitches have been triggered by plugins not using save/restore on the canvas properly. (should be visible on all platforms though).

[oocheol]

As you might think, this problem is being caused by giving the lines a gradient effect.
This is because the above symptoms did not occur when the effect was applied in a single color to the line.

I did not understand exactly what you mean by plug-in, and if it refers to the version of chart.js, I am using version 3.7.1. However, updating to the latest version did not solve this problem.
And the working environment is being carried out using java spring and node.js.