I've built a map with a GeoJSON layer that shows some countries of the world as filled-in polygons.
Everything is working fine, except that when you zoom into the map, the layer sometimes moves separately from the map. The problem is more pronounced on mobile, and my gifs below are from mobile.
Related questions I've looked at but don't quite apply to this case:
There are also related issues in the Leaflet GitHub (Map content moves when zooming and Strange zooming behaviour with vector (extended L.geoJson) layers on 1.0.0), but the solution to that problem was to update the CSS file so that its version was in sync with the JS file. I'm using react-leaflet with the CSS from leaflet which are in sync to the best of my knowledge.
I also see this problem happening on the GeoJSON example on the Leaflet website:
Reproducible code is at https://leafletjs.com/examples/geojson/. The more things there are on the layer, the greater this slippage. Sometimes when zooming I accidentally grab onto the layer with one finger and it stays underneath that finger as the map gets panned. It is not limited to GeoJSON - it occurs with CircleMarkers as well (example site I found online where it occurs).
How can we stop this slipping effect and make the features more "anchored" like on Google Maps?