Leaflet polygons cut off on map viewport while dragging

Current behavior: When dragging the map so that polygons or circles are only partly in the viewport, then dragging back to reveal them again, the part of the polygons or circles that were out of the viewport are cut off only to be properly redrawn after dragend.

Desired behavior: Either the polygons and circles should not be cut off, or seamlessly redrawn/reappear in the viewport.

The problem is present in http://leafletjs.com/examples/quick-start.html, see the attached gif for an impression of what happens.

Browser: Chrome 36.0.1985.125 m OS: Windows 8.1 Pro

Only part of the issue is present in IE 11.0.9600.17207. Leaflet does work as desired for circles only in this version of IE.

[luveti]

Apparently the L.Map constructor accepts a renderer option, so you can do something like this:

var map = new L.Map('map', { renderer: L.svg({ padding: 100 }) });

Of course you wouldn’t want to do this with a map that has a lot of things to render. But for my use case, this worked really well!

Side note: The current version of Leaflet (1.0.1) will actually (from what I can tell) create the renderer the first time map.getRenderer() is called, which you can see here https://git.io/vPn2v. So you could also do this:

var map = new L.Map('map');
map.getRenderer(map).options.padding = 100;

NOTE: I know this issue has been closed for a while now, but I was having this issue today, and figured I’d share my solution, in case anyone else comes across the same issue!

[colinmegill]

Brief update in case anyone else from the d3-verse ends up on this thread… at this point I believe the problem was that I was not manually fitting the d3 svg to the leaflet pane using getBounds, which is demo’d here: http://bl.ocks.org/d3noob/9211665.