Vector layers drift away on flyTo when zoomAnimation = false

• 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

[Fischerfredl]

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

[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.