search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
10.9k stars 2.19k forks source link

Marker shaking easeTo / flyTo - Firefox/Edge #8614

Open pathmapper opened 4 years ago

pathmapper commented 4 years ago

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:

marker_jitter_chrome

Actual Behavior

The marker is shaking a lot:

marker_jitter_firefox

ryanhamley commented 4 years ago

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 commented 4 years ago

what OS are you on?

Linux - Debian 9 (stretch) 64-bit

andrewharvey commented 4 years ago

I could replicate on Linux with Firefox.

pathmapper commented 4 years ago

I could replicate also with

peterqliu commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

moving_symbol_icons

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

scroll_zoom

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.

manafire commented 2 years ago

I was hopeful that the work in 2.7.0-beta.1 might have fixed all of the marker jiggling but this is still an issue, also in Chrome for me, particularly noticeable with multiple markers.

There is no jiggle when using geojson layers as suggested elsewhere, but unfortunately the marker click detection there seems to be bounding box only (rectangular) and doesn't support the precise hit testing available through svg pointer-events only on markers. :/