Marker's pixel position is incorrect when map container's width very large.

[george-hong]

mapbox-gl-js version:

mapbox 2.9.1

browser:

Chrome 103.0.5060.66

FireFox 102.0

Steps to Trigger Behavior

1. open the demonstration and move scroller to center
2. find the marker
3. move or zoom map

Link to Demonstration

https://jsfiddle.net/domore/1Lpza0c5/2/

Expected Behavior

marker can stay it's coordinate correctly (offset was increased by the width of container)

Actual Behavior

marker looks like drift

https://user-images.githubusercontent.com/29765615/179920486-7bcb9450-14c2-4c7a-888c-f8f5f7034862.mp4

[abdul-Tz-prog]

Hello, I am also facing this issue (marker moving on zoom-in). I already used: import 'mapbox-gl/dist/mapbox-gl.css'; in my react-laravel mix application, it is not working. I looked for other solutions on StackOverflow and other platforms but did not find any solution. Is this really a bug from the mapbox-react side or am I missing something?

[george-hong]

您好，本人在上学，放假后将会尽快与您联系！

[benoitv-code]

I had the same issue when using Mapbox 2.13.0, markers were moving out-of-position on some zoom levels when moving the map.

Root cause: The root cause of the bug was Mapbox defaulting to a globe projection mode, which apparently has issues when using a non-integer zoom level (like 5.5), either programatically or when a user is zooming in / zooming out.

Workaround: I fixed the issue by setting the projection mode to mercator:

    let map = new mapboxgl.Map({
     /* ... */
      projection: { name: "mercator" },
    });

Edit: Actually it doesn't seem to be the same bug as the original issue, I am opening a new one specific to this issue: https://github.com/mapbox/mapbox-gl-js/issues/12592