Mapbox-gl-js: Marker shaking easeTo / flyTo - Firefox/Edge

[pathmapper]

mapbox-gl-js version: v1.2.0

browser: Firefox 68.0.1 (64bit)

Steps to Trigger Behavior

1. Add custom marker to map
2. On load slowly easeTo
3. Open in Firefox

Link to Demonstration

https://jsbin.com/xubonoyaqu/edit?output

Expected Behavior

Same behavior as in Chrome, almost no shaking of the marker:

Actual Behavior

The marker is shaking a lot:

[ryanhamley]

Interesting. I actually can't reproduce this in Firefox 68.0.1 (64 bit). Your example looks the same in Chrome and Firefox on my machine. Out of curiosity, what OS are you on?

[pathmapper]

what OS are you on?

Linux - Debian 9 (stretch) 64-bit

[andrewharvey]

I could replicate on Linux with Firefox.

[pathmapper]

I could replicate also with

• Firefox 68.0.1 on Windows 10 Pro 64-bit
• Firefox for Android 68.0 on Android 8.1.0

[peterqliu]

Since the map moves smoothly but the (DOM) marker is choppy, I suspect this has to do with CSS transform implementations on different platforms. transform is hardware accelerated for most.

[ahk]

Just curious do you know if this is a regression?

Is it possible this is a result of compositing lag in FF on Linux hosts? Do you get the behavior you want with any other applications that attempt to track a canvas scene with a DOM element?

[pathmapper]

do you know if this is a regression?

Checked every version back to v0.48.0 and the issue exist at least since this version (for prior versions the demo isn't working).

Is it possible this is a result of compositing lag in FF on Linux hosts?

As mentioned in https://github.com/mapbox/mapbox-gl-js/issues/8614#issuecomment-520119710, I see this issue also with FF on Windows 10. Just checked again and just learned that this issue exists also in Edge (44.17763.1.0) on Windows 10. So this issue is neither limited to Linux nor FF.

Current overview where this issue exists:

| OS | browser(s) |
| ------------- |-------------|
| Linux | Firefox |
| Windows 10 | Edge and Firefox |
| Android | Firefox for Android |

Do you get the behavior you want with any other applications that attempt to track a canvas scene with a DOM element?

No idea, I'm not aware of any other application.

[ahk]

Sorry I was reading too quickly, thank you for pointing out all these platforms with the behavior.

I'm suspicious it's the browser compositor lagging and we won't be able to do anything about that, but I'll try to take a look at it this week. If you happen to see or think of any applications that have a 2D scene in a canvas element that have an overlayed DOM element co-animating, that would be helpful.

[pathmapper]

any applications that have a 2D scene in a canvas element that have an overlayed DOM element co-animating

These are not applications, but these 6 years old issues on the Chromium and FF issue tracker providing demonstrations for out of sync canvas/DOM:

https://bugs.chromium.org/p/chromium/issues/detail?id=169024
http://jsfiddle.net/Raveler/pV2ud/

https://bugzilla.mozilla.org/show_bug.cgi?id=890289
http://jsfiddle.net/4qher/2/

I'm not able to reproduce the issue with these demos using FF on Linux.

[pathmapper]

Don't know if it's related, here is a weird behavior:

Modify the easeTo camera options of my original demo:

1. remove zoom
2. append 1 to the longitude value of center

Then the dot icons of the place symbol layers start moving:

https://jsbin.com/kecaxutexo/1/edit?html,output

Seeing this on Linux in FF and Chrome, so it might be a separate issue.

On FF the marker is still shaking although the map is not moving noticeable.

Another observation:
There is a repositioning of the marker noticeable when the easeTo is removed from the demo and the map is zoomed via scrollzoom (depending on where the mouse pointer is located on the map).

https://jsbin.com/hatudofeno/1/edit?html,output

This is noticeable in FF and Chrome so I think this is related to snapping of the marker to the pixel grid as explained for symbol layer icons in https://github.com/mapbox/mapbox-gl-js/issues/6096#issuecomment-365102817:

When a gesture such as a drag is in progress, we icons are placed exactly at their geographic location and rendered with antialiasing. This avoids "shaking" during the gesture. When the gesture ends, we snap the icon to the pixel grid, so that it renders sharply when the map is static.

Assuming the same is done also for easeTo/flyTo, could it be that this is working in Chrome and failing for some other platforms, so that during an easeTo/flyTo animation there is an ongoing snapping of the marker to the pixel grid?

Edit:
The moving icons could be related to snapping to the pixel grid. As this happens also in Chrome it seems like there is no such _avoid "shaking" during the gesture_ for easeTo/flyTo.