[Bug] Markers jump in 1 pixel after map zooming

[khmm12]

Greetings 👋

The problem

I found weird markers behaviour. After map zooming they jump in 1px.

gif

Reason

It happens because screen coordinates are rounded after map movement (see).

Reproducible on:

• Macbook Pro 2015 15
• macOS, Google Chrome 98
• mapbox-gl v1 / maplibre-gl-js v1 / maplibre-gl-js v2

But it should be noticeable everywhere due to subpixel rendering.

Solution

Round screen coordinates during movement taking into account Window.devicePixelRatio. Theoretically it should solve stuttering during zooming (which happens on HiDPI screens only?).

const pixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;

export function roundPixel(pixel: number): number {
  return Math.round(pixel * pixelRatio) / pixelRatio;
}

 DOM.setTransform(this._element, `${anchorTranslate[this._anchor]} translate(${roundPixel(this._pos.x)}px, ${roundPixel(this._pos.y)}px) ${pitch} ${rotation}`);

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[HarelM]

@khmm12 any chance you could create a PR for this? Preferably with a test to reproduce the issue.

[timokorkalainen]

Would this also be the reason why my markers keep wiggling when rotating a pitched map? Here's an example: https://youtu.be/eEmTnzdDWf0 (v. 2.4.0)

I can also see the 1 pixel movement after zooming.

[HarelM]

I tend to say that these are different problems, but I'm not sure, there's not a lot of code there, and the round above does not happen in move event...

[timokorkalainen]

I did dig up some more now and this seems to be related indeed.

I do the rotation by calling setBearing on every frame, which in turn apparently fires moveend each time, thus triggering the rounding at each frame.

I do it like this to make sure I have full control over the camera movement.

[Pheonor]

Why do not just replace the position round at the end of the movement with a round adapted to Hi-DPI screen with something like:
this._pos = this._pos.mult(window.devicePixelRatio).round().div(window.devicePixelRatio);