Gradient line transition locations shifted

[shrijitsingh99]

maplibre-gl-js version: 5.1.0

browser: Chrome, Safari

Issue

I am trying to show the path a user takes color-coded based on speed. To achieve this I am using line gradient using data-driven style.
The issue is that the gradient line seems to have an offset or the colors are not at the right spot and seem shifted at some places compared to when I display the path as points with their colors.

The first image is the gradient line, and the second is the points. If you see the bottom part of the map, you will see that the green intervals are not aligned in both the images. I am not sure if this is an issue due to floating point accuracy.

Code

GeoJSON File: https://gist.github.com/shrijitsingh99/0c11103b85bace16d0a2492f273a5cd7
Reference Code Path (Points): https://jsbin.com/vapeqav/edit?html,output
Gradient Code Path (Gradient Line): https://jsbin.com/munimiw/edit?html,output

[HarelM]

I didn't debug the code, but aren't you assuming the distance between every two points is identical?
I think this might cause the shift you are seeing.
Here's the code I'm using to present slope on my routes:
https://github.com/IsraelHikingMap/Site/blob/de911cb386f7279cb2c489b84602440470768da8/IsraelHiking.Web/src/application/components/route-statistics.component.ts#L980

It calculates the length of the route first (in meters) and then calculates the slopes according to the relative place in the route's distance.

[shrijitsingh99]

Thanks! Yeah, while generating the path I had tried to ensure they were equally spaced but they were actually not exactly equally spaced like you mentioned and the errors added up eventually to cause the shift.
I implemented, some thing similar based on the link you sent.
Here it is for reference if anyone else finds it useful: https://jsbin.com/zedivek/edit?html,output