I'm using leaflet on a React js application (with typescript).
The map works well on desktop browsers but on mobile I'm experiencing some issues while zooming and panning while pinching on the screen: while pinching on the screen the markers move together with my fingers but the map doesn't follow immediately, it has some kind of animation that makes it go out of sync with the markers during the time of animation.
What I'd expect is the map to correctly follow the markers even while they are moving or the markers to follow the map animation. Somehow I can't find any option to control this behaviour.
This is my react code for the map:
<MapContainer id="map" center={[41.890196167312055, 12.492341923687258]} ref={mapRef} trackResize={true} zoomSnap={0} zoomDelta={0.3} zoomControl={false} zoom={zoom} maxZoom={18} minZoom={2} inertia={false} easeLinearity={0}>
<TileLayer
attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ZoomControl position="bottomleft" />
<ScaleControl position="bottomleft" metric imperial={false} />
{
Object.keys(places).map(place => <Marker key={place} position={[plantsPlaces[place][0].lat!, places[place][0].lng!]}>
<Popup offset={L.point(0,-20)} zoomAnimation={false} >
{(places[place]).map(p =>
<div key={p.id}>
<div className="mapTooltipHeader flex flex-row align-items-center justify-content-between">{p.plantName}</div></div>)}
</Popup>
</Marker>)
}
</MapContainer>
Effect can be seen here: https://gifyu.com/image/SKXsL
Is it possible to disable this behaviour and just have the map follow the markers while pinching?
Finally found the solution:
it was not a leaflet or react-leaflet issue.
In all the css files of the website there was a section with this code:
div {
transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
}
I caused an animation during zoom and pan of the map.
Removing this code, the animation disappeared.