You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Migrated from:Leaflet#9961 Original author: danallsop Original created: 2025-10-24T08:48:01Z
When zooming or using map.flyTo() in Leaflet, the map becomes pixelated while zooming in, and blank areas appear while zooming out.
Both tile and vector layers (e.g. GeoJSON) are only re-rendered after the zoom animation finishes, so the visual update feels discontinuous.
I suspect this behavior is related to Leaflet’s render loop: the map seems to scale the rendered layer (via CSS transform) and only re-project or re-render once the animation ends.
I’m wondering if there is any possibility to force intermediate re-renders — e.g. continuously updating the projection during the animation at ~30 fps for smoother visuals.
When zooming or using map.flyTo() in Leaflet, the map becomes pixelated while zooming in, and blank areas appear while zooming out.
Both tile and vector layers (e.g. GeoJSON) are only re-rendered after the zoom animation finishes, so the visual update feels discontinuous.
I suspect this behavior is related to Leaflet’s render loop: the map seems to scale the rendered layer (via CSS transform) and only re-project or re-render once the animation ends.
I’m wondering if there is any possibility to force intermediate re-renders — e.g. continuously updating the projection during the animation at ~30 fps for smoother visuals.
My repo:
https://github.com/arne-witteler/vue-leaflet-demo
Live demo:
https://vue-leaflet-demo.vercel.app/
map.animation.mp4