Animated features issues when moving/dragging the map

[Diego251]

Hello, having an issue with the custom layer, on which I am trying to draw animated circles. Basically, the issue happens when I move (pan/drag) the map. Extended details are here:

https://stackoverflow.com/questions/51156212/leaflet-canvaslayer-how-to-get-animated-features-to-move-correctly-when-dragg

Is there something very obvious I am missing? Thank you for your help!

[CoooWeee]

Same here (I am using "leaflet": "^1.7.1"). I think it is related to the L.DomUtil.setPosition(this._canvas, topLeft); in:

_onLayerDidMove: function () {
    var topLeft = this._map.containerPointToLayerPoint([0, 0]);
    L.DomUtil.setPosition(this._canvas, topLeft);
    this.drawLayer();
},

It does move the canvas back which is needed for the drawLayer but it updates the view already. I tried following code WITHOUT success:

    const opacity = L.DomUtil.getStyle(this._canvas, 'opacity');
    L.DomUtil.setOpacity(this._canvas, '0');
    var topLeft = this._map.containerPointToLayerPoint([0, 0]);
    L.DomUtil.setPosition(this._canvas, topLeft);
    this.drawLayer();
    L.DomUtil.setOpacity(this._canvas, opacity);

BTW I think a setTransform would do the job instead of the setPosition.