D3 events triggering svg hidden element

Question

I can not find the answer for this, and it took me a while to recreate it as a separate violin / pen, but I finally had it.

I am working on a Vaadin application that uses D3 to draw and control SVG graphics. At some point on the screen there are svg that have visibility:hidden .

This works great in all browsers.

These hidden elements have click and mouseover events that work again in all browsers. However, in Firefox version 34, the hidden element still fires its events (click and mouse hover) when they are still hidden.

To better explain: when the button is hidden, the mouseover event should not fire when it is visible. This is how it works in all browsers except Firefox 34, 35 beta and 36 dev edition. It works fine in firefox 31.

I suspect that this is a mistake in D3, but I wanted a second opinion or for someone to point out my mistake. It is worth noting that setting display:none on an element works in firefox 34 and above, however I don't feel that the problem is there

I created jsbin showing the code, there are two orange icons, one has visibility:hidden (you may have to disable it), if you click on a hidden element with chrome, nothing will happen. but with firefox 34 fire events. Here jsBin

Any idea why it works? I am guessing a D3 question or a firefox error, however I would like to nail it to fix my code, to contribute to the fix in other areas.

thanks

Answer 1

This is just a bug in Firefox. If you report it , I will fix it.

Given a certain value for event pointers, we can say for sure whether the element should receive events or not. If we do not know what values ​​the event pointers have, the element may or may not receive pointer events. This is all the specification is trying to say. There is no ambiguity here.

Note that the firefox error only affects <image> elements. If you replace the image with the <rect> element, you will see the correct result even in Firefox.

Answer 2

spec states this is normal behavior:

Depending on the value of the 'pointer-events' property, graphic elements that have a ' visibility set to hide may receive events.

As a job, you can use either display: none , or add pointer-events: none to your class using visibility: hidden .