Vector layers drift away on flyTo when zoomAnimation = false

[Fischerfredl]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce
Steps to reproduce the behavior:

• create a map with option zoomAnimation: false
• create a vector layer (e.g a polygon) and add to map
• use map.flyTo() to pan to any point

Expected behavior
Vector layers follow the movement of the map.

Current behavior
Vector layers drift away while panning. When the target is reached they snap to their proper location.
This is even more perceptible when the zoom levels between the current position and the target differ.

Environment

• Leaflet version: 1.7.1
• Browser (with version): Firefox 85.0.1
• OS/Platform (with version): Ubuntu 20.10

Additional context
My current workaround is to set mapInstance._zoomAnimated = true before I add a layer and map._zoomAnimated = false right after. This way the animation handler will be registered in src/layer/vector/Renderer.js while keeping the zoom animation disabled.

Minimal example reproducing the issue

https://plnkr.co/edit/qHqGIded24Z4MYtO

• this example is as simple as possible
• this example does not rely on any third party code

[johnd0e]

Perhaps same roots as in #7072

[ebrensi]

Does this just happen with pinch-zoom/panning on a touchscreen?

[Fischerfredl]

Does this just happen with pinch-zoom/panning on a touchscreen?

This happens by programmatically triggering the flyTo/flyToBounds method e.g. through a button. I experience this in Firefox and Chromium on a Laptop running Ubuntu. There is no built-in touchscreen.

[Fischerfredl]

I have got a more general applicable workaround that might help:

const originalOnAdd = L.Renderer.prototype.onAdd
L.Renderer.prototype.onAdd = function () {
  originalOnAdd.call(this)
  if (!this._zoomAnimated) {
    L.DomUtil.addClass(this._container, 'leaflet-zoom-animated')
  }
}

It specifically runs the excluded code path in Renderer.js - onAdd method where the leaflet-zoom-animated class is set to the renderer-container. This fixes the difting layers while keeping other zoomAnimation effects disabled.

[johnd0e]

I have got a more general applicable workaround that might help:

Cool!
May be you will be even able to fix the roots of the issue?

[Fischerfredl]

I can offer to investigate further as soon as I have the time. Could be next week.

[BasieP]

Any progress on this? we can still see this happening..
Anyone did investigate?

[mourner]

Please check out the latest beta https://github.com/Leaflet/Leaflet/releases/tag/v1.8.0-beta.3 and see if everything's resolved?