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

[anhchilyun]

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.

[anhchilyun]

You can try in this demo: http://leafletjs.com/examples/quick-start/
please use firefox

[IvanSanchez]

Hi, I'm closing this issue because the quality is not good enough. I suggest reading "How To Ask Questions The Smart Way" and "How to Report Bugs Effectively" so you can make good bug reports.

[anhchilyun]

My English is poor! But the problem I say is really exists!

[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.

[perliedman]

Huh, I was trying this example out in Firefox, and just about to say this works as expected, but then realized there _is_ actually a problem here.

After panning the map, _sometimes_ part of the circle and polygon do not catch click events, and the click is passed through to the map itself.

You can see this in action by hovering the mouse pointer over the polygon or circle. Normally, the pointer should then be the cursor:pointer shape, indicating you can click the vector item. Sometimes, however, the pointer changes to the grab hand (used for panning the map), even though you're still clearly over the vector item.

Looks like a browser issue, possibly some weird interaction with what we're doing in Leaflet.

Tested on Firefox 55.0.2 (64-bit) on Win10.

[astridx]

I also stumbled across this problem. I am working with Ubuntu 16.04. When I pan a polygon out of the visible area in browser Firefox 55.0.2 (64-bit) and pan it immediately back, the click-able area of the polygon is no longer OK. If I move the polygon out of the top area of the browser, the top area of the polygon is not click-able after moving it back. If I move the polygon out of the bottom area of the browser, the bottom area of the polygon is not click-able after moving it back.
If I release the mouse in between, all is OK. Also in Chrome everything is OK.

[msiadak]

My Firefox installation was a little old (54.0 32-bit). I was not able to reproduce this at that version, but after updating to 56.0 (32-bit) I was able to reproduce this behavior.

Possibly an issue introduced at Firefox 55?

[cherniavskii]

I confirm.

Firefox 55.0.2 (64-bit) for Linux Mint.

[fiejen]

I have a similar problem, and do not yet know whether the root might be the same.

I have an SVG layer, with a g element and a number of circles in it. Now, when I pan the g still reflects the coordinates of the positioned circles whilst the svg element pans "apart", which invisibles the circles beyond the new position of the svg, but still within the remaingly correct positioned g.

Still investigating. But surely the original click event on the circle is also gone.

[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

[avidspartan1]

I'm currently experiencing this issue. Maybe this is a no-brainer, but for anyone who's looking for a workaround and hasn't found one, you can use a Canvas renderer.

[lapo-luchini]

@nrenner did you open an issue on Firefox's bugzilla already with your nice Leaflet-less tests?
(if you didn't, I could do it; just avoiding to create a double one)

[nrenner]

No, I haven't yet. Go for it.

I had a hard time searching Bugzilla for already existing bugs, closest I could find by searching the SVG Component page, but not sure if related:

• 1424758 - SVG rendering of transformed group members leads to eventable area being offset from visual rendering of elements
• 1416178 - Inaccurate mouseover regions for elements with coordinates in unit interval when SVG child of transformed DIV

[lapo-luchini]

Mhhh… they might be related but not exactly "our" problem (both seems to be precision-related, this one seems not)… so I guess I'll file a new one:
Bugzilla 1486952

[perliedman]

@nrenner @lapo-luchini nice work, both of you! Creating a minimal reproduction as well as submitting the Firefox bug is greatly appreciated!

[nrenner]

This is now fixed in current Firefox 65.