Mapbox-gl-js: Popups and markers lag behind the map during pan animation

[bicubic]

Issue can be seen at https://www.mapbox.com/mapbox-gl-js/example/popup/
Perform a pan gesture with the mouse and lift the mouse button while still moving the cursor so the map continues to pan for a bit. Alternatively, use the arrow buttons to pan the map.

During the animation, the popup appears to be located a few pixels (one frame?) behind the map. Quite jarring on touch screen experiences.

[kkaefer]

Here's a slowed down version of the bug.

[dagjomar]

This is true not only for popups for markers also. Generally, things that are DOM elements placed on top of the rendered canvas.

[bicubic]

Looks like it may be a timing issue after all. The DOM appears to be a frame ahead of the canvas when the pan easing animation is in effect.

The attached gist is a proof of concept which injects one frame of latency to the popup transform. The latency is added only if the _update() was called from browser.tick() and not if it originated from a mouse event.

It doesn't completely solve the misalignment but does significantly improve it for me. I believe the remainder of the misalignment may be due to the camera._ease logic which is panning the camera by sub-pixel amounts. During mouse panning, the point is always integer. I can't figure out how to fix the remaining error, but hopefully this gives some clue where to look.

I'm happy to work towards a PR if you guys have an idea of how to tackle this. I don't think that latency hack is a viable solution in itself.

https://gist.github.com/bicubic/272f56341b55689982c60e32c7b28242

[bicubic]

Please take a look at #4681

I was able to get popups fully aligned with two changes:

DOM transform updates are not applied immediately but buffered via new function util.pushTransform() and applied via util.applyTransforms() which is invoked by painter.render(). This ensures that layout changes happen at the same time as canvas painting. This involved a change to DOM.setTransform(), but it is backwards compatible and callers must explicitly pass in a new parameter to buffer the change, otherwise it is invoked immediately as before.

Second change is Popup.offsetedPos rounding is prevented if and only if a pan easing animation is in progress. This allows the popup to match the sub-pixel map animation and eliminates the final source of perceived jitter. Upon the completion of the animation, the offset is rounded off. Rounding is still applied in all other scenarios.

[joedjc]

It would be great if this could be fixed. I find it is highly dependent on the browser. Chrome and Firefox are pretty much always in sync, but most other browsers (Safari, IE, Edge) have a noticeable lag which doesn't look good.

[keyofj]

@dagjomar I experience the same mostly in IE 11 and Safari. When dragging mapboxgl.Marker drags behind so it gives a rubber band effect. I have not figured out a way to stop this other than have users use Chrome.

[omasback]

Not sure if this is the same bug, but map.fitBounds() exhibits the same behavior, even on Chrome. It seems that the markers are one frame ahead of the map. As a workaround I used an ease-in easing to keep the marker from jumping way ahead on the first frame

[andy-mcdonald]

Still seeing the issue as described on Safari (not tested on IE / Edge) with the latest version (v0.42.1) of mapbox-gl. Wondering if this has been verified as a bug and is there a fix in the works?

Overall, MapBox looks incredible and far more appealing than Google Maps but unfortunately, this is pretty much a deal-breaker in terms of using it in our current project.

Any update on the status of this issue (even if it's a 'no fix coming soon') would be greatly appreciated :)

[joedjc]

I agree it would be great to know if this can be fixed. I am hoping it might be related to this issue https://github.com/mapbox/mapbox-gl-js/issues/5390 as the behaviour looks very similar so it may fix that as well

[ChrisLoer]

@jfirebaugh I'm still seeing this on Safari and Mobile Safari (but not Chrome or Firefox):

[joedjc]

@ChrisLoer @jfirebaugh It's still there in IE11 and Edge as well (where it has always been worse). I was hoping it would also fix this https://github.com/mapbox/mapbox-gl-js/issues/5390 but I still see it...especially in IE11 and Edge. Although its a different use case it does look like similar behaviour.

[jfirebaugh]

Tracking the "map lags popups and markers" issue in #5390.