mouseMove event lngLat is offset from mouse pointer at intermediate zoom levels

[jackcarter]

I have a mapbox app that plots points on a map and lets the user hover to reveal additional info. To detect hover state, I'm using a mousemove event + queryRenderedFeatures, but the event's lngLat doesn't always correspond to the mouse cursor's apparent position. It appears to happen at intermediate zoom levels (approximately zoom "5.5"). Setting the map projection to "mercator" prevents the offset from occurring, but I prefer to keep the default "globe" view if possible.

Is there any way to fix the offset, while still using "globe" projection?

mapbox-gl-js version: 3.7.0

browser: Chrome, Safari, Edge

Steps to Trigger Behavior

1. Create a map with the default "globe" projection, set to zoom level 5.5
2. Trigger a mousemove event and get the lngLat
3. Draw a point at the lngLat coordinates, and notice that it is not aligned with the mouse

Link to Demonstration

I built this debug app to show the offset visually. Mousing over the red dots in the grid should cause a popup to appear. The green-and-red circle shows the mousemove event's point.lngLat coordinates. The green-and-red circle does not track my cursor precisely, which makes it hard to select a specific dot.
https://output.jsbin.com/xewegam/1

Expected Behavior

mousemove lngLat is visually aligned with the mouse cursor

Actual Behavior

lngLat is misaligned, with a variable offset that depends on the position of the cursor within the map window

[divyanshuraj751]

Use querySourceFeatures Instead of queryRenderedFeatures may be this can fix the issue

[jackcarter]

Use querySourceFeatures Instead of queryRenderedFeatures may be this can fix the issue

No, this isn't a solution. It doesn't fix the misalignment between the mouse cursor and the lngLat.

[divyanshuraj751]

1. Use screen coordinates for hover detection

map.on('mousemove', (e) => {
const point = map.project(e.lngLat);
const features = map.queryRenderedFeatures(point, { layers: ['your-layer-id'] });
if (features.length) {
//....
}
});

2. Calculate the distance between the mousemove event’s lngLat and your features, and trigger the popup only if the mouse is close enough to a feature

3. Adjust Position Dynamically (dynamic offset in the queryRenderedFeatures options to improve alignment)

const point = map.project(e.lngLat);
const padding = 10; // Adjust as needed
const features = map.queryRenderedFeatures([
[point.x - padding, point.y - padding],
[point.x + padding, point.y + padding]
], { layers: ['your-layer-id'] });

if (features.length) {
// Show popup
}