Hover on L.SVG paths after map pan is broken on firefox

The element of path will lose interactive sometimes when move the map in firefox

How to reproduce:

• Create map with one or more vector layers rendered in a L.SVG
• Pan the map (so that the pixel bboxes of the vector layers don’t overlap with their previous positions)
• Hover over the vector layers

The pointer cursor will not update, and the hover events will not fire.

Only seems to be reproducible in Firefox >= v55.0.

[nrenner]

I can reproduce by panning the map once (in any direction), so that features don’t overlap with their old positions. Firefox 57.0.4 (64-Bit) and Firefox Nightly 59.0a1 (2018-01-19) (64-Bit) on Ubuntu 16.04.

Interactive Leaflet demo

From using the Firefox Inspector to see what changes when panning the map, I created the following demos that reproduce the issue without Leaflet:

Interactive demo without Leaflet

Automated test

The observed change when panning the map is moving (transitioning) the leaflet-map-pane and the svg elements. Simplified example as in the demo:

    pane.style.transform = 'translate3d(200px, 0px, 0px)';
    svg.style.transform = 'translate3d(-200px, 0px, 0px)';
    svg.setAttribute('viewBox', '-200 0 400 200');

The corresponding Leaflet code parts are:

https://github.com/Leaflet/Leaflet/blob/ae8a1a645a3ed2c2637b6ae9056f0c1ff794949c/src/map/Map.js#L1219-L1221

https://github.com/Leaflet/Leaflet/blob/ae8a1a645a3ed2c2637b6ae9056f0c1ff794949c/src/layer/vector/SVG.js#L97-L99

[IvanSanchez]

I don’t know what is the problem. I don’t know how I can reproduce the problem on my computer. I do not know if the problem happens on all web browsers.

I do not know if the problem happens when panning the map with the mouse, or with a touchscreen, or with the keyboard, or with all. I don’t know if the problem happens when doing one thing at once, or several things at once.

We do not have enough information to know what the problem is.