search

floledermann / mapmap.js

A data-driven API for interactive thematic maps
GNU Affero General Public License v3.0
113 stars 12 forks source link

.hoverInfo() breaks CSS path:hover in Firefox #33

Open wahlatlas opened 8 years ago

wahlatlas commented 8 years ago

Say you wanted to have focus-rings on mousing over municipalities like so

path:hover {stroke: purple; stroke-width: 3;}

just add this line in the style section of https://github.com/floledermann/mapmap-examples/blob/master/tutorial/basics.html

This will work as expected in all browsers except Firefox when you also have .hoverInfo invoked. If you take out .hoverInfo and leave the zoom behavior in, the css based path:hover will also work in Firefox.

Now I can see mapmap.js provides something like

        hoverEl.on('mouseenter', function() {
        hoverEl.css(options.hoverEnterStyle);
            }).on('mouseleave', function() {
        hoverEl.css(options.hoverLeaveStyle);

but I couldn't get it to do the focus rings I wanted.

In analyzing this issue I found some duplicate use of pointer events (as attribute and as style) in the path elements mapmap.js creates, but they seem unrelated

pointer

floledermann commented 8 years ago

I can confirm this, but it doesn't seem to depend on even adding .hoverInfo() on my machine. I had an idea for a fix, unfortunately it didn't work, so I have to investigate this further.

Firefox mouse event handling on SVG elements seems to be pretty broken, I found a related bug but I am not sure if this is related.

wahlatlas commented 8 years ago

Thanks for taking the time to look after the minor problems and Firefox intricacies. At least on static SVG, Firefox does the path:hover as intended, see here http://vis.uell.net/mapmap/test-hover-ff.html

floledermann commented 8 years ago

Yes, I know, this has something to do with dynamically generated elements. I hope I have more time to look into this after the FOSSGIS conference next week.