D3 events firing on a hidden svg element

Question

I can't seem to find an answer for this and it took me a while to recreate it as a stand alone fiddle/pen but I finally have.

I am working on Vaadin application which uses D3 to draw and manipulate svg graphics. At a point there are svg's on screen which have visibility:hidden.

This works perfectly find in all browsers.

These hidden element have click and mouseover events, which again work find in all browsers However in firefox version 34 the hidden element still fire their events (click and mouseover) when they are still hidden.

To explain better: when a button is hidden, its mouseover event shouldn't fire, when its visible it should. That is how it works in ALL browsers except for firefox 34, 35 beta and 36 dev edition. It works fine in firefox 31.

I am suspecting this is a bug in D3, but wanted a second opinion or for someone to point out my error. Its worth noting that setting display:none on the element works in firefox 34 and up, however I don't feel that the problem lies there

I have created a jsbin demonstrating the code, there are two orange icons, one has visibility:hidden (you might need to disable to see it) if you mouse over the hidden element with chrome nothing happens. but with firefox 34 the events fire. Here's the jsBin

Any idea's why it would fire? I am guessing either D3 issue or firefox bug, however I'd like to nail it down to either fix my code on contribute to a fix in the other areas

Thanks

Answer 1

This is just a bug in Firefox. If you report it I'll fix it.

Given a specific value for pointer-events we can say exactly whether the element should receive events or not. If we don't know what value pointer-events has then the element might or might not receive pointer events. That's all the specification is trying to say. There's no ambiguity here.

Note that the firefox bug only affects <image> elements. If you replace the image with a <rect> element you should see the correct result even in Firefox.

Answer 2

The spec states that this is normal behavior:

Depending on the value of property ‘pointer-events’, graphics elements which have their ‘visibility’ property set to hidden still might receive events.

As a work around you could use either display: none or add pointer-events: none to your class with visibility: hidden.