Mouse events are not at the correct location for line layer with a line-offset

[jkoelewijn]

maplibre-gl-js version: at least 2.1.7, probably all versions

browser: at least Chrome, Firefox and Edge

Steps to Trigger Behavior

1. Create a line layer with a nonzero line-offset
2. Listen for mouseenter and mouseleave events for that layer
3. Observe that the events are triggered at the wrong location, especially at the end of the line

Link to Demonstration

https://jsbin.com/kokutixesa/3/edit?html,output

Expected Behavior

In the demonstration link, when hovering the mouse over the green thick line, the green thick line becomes red with a dash pattern.

Actual Behavior

In the demonstration link, the mouseenter and mouseleave events of the layer with the green thick line act like the green thick line starts at the right of the green thick line and ends at the left of the black line.

Similar Mapbox GL JS issue

mapbox/mapbox-gl-js#9419