IE9 detects z-index events other than Chrome / Firefox - how to fix it?

Question

I am creating an interactive visualization application that is pretty much completely client side Javascript, see here:

http://korhal.andrewmao.net:9294/#/classify/APH10154043

Try the following controls:

• mouse wheel: enlarge
• drag an empty area: pan
• drag the bottom area or markers: pan / zoom
• click once, then click again: draw a rectangle
• drag to field: move field
• drag field margins: resize

The main mechanism is SVG, covering the canvas. The canvas has z-index 0 and SVG z-index 1 - feel free to check the DOM. On Chrome / Firefox, everything works very well.

The problem is that in IE9, the canvas seems to receive SVG click events, even with a lower z-index. You can tell because the mouse / click / drag actions of the mouse do not work in the main area of ​​the diagram, but they work in the marginal areas, because the SVG is a bit bigger than the canvas, and it collects events there. For example, try rotating the mouse in areas of the axis or below.

After playing with this a little more, I think I saw a pathology. I made a version of the page where I allowed to draw blocks outside the canvas area (graphics), but still inside the SVG. Then I could do the following (in IE):

1. Draw a rectangle in the axis area (outside the canvas)
2. Drag it to the main area (on top of the canvas)
3. Hover over the field and use the mouse wheel - now scaling events are picked up by SVG. Mouse movement where there was no box, led to the fact that events moved to the canvas (disappear).

Thus, it seems that the SVG collects mouse events only when an explicit SVG object is located under the mouse, otherwise it is passed to the canvas and only to Internet Explorer.

One obvious way to solve this problem is to create a transparent rectangle across the entire SVG area, but it looks silly. Also, maybe I'm doing something wrong, which is fixed when using Chrome, but it doesn’t work in IE. Anyone have any suggestions?

Note. One (remote) answer suggests wrapping the entire SVG area in a <g> element and applying pointer-events: all . However, this did not work. I don’t even think that this is necessary, since pointer events are well detected throughout the SVG area, except when there is a canvas.

Answer 1

If you want clicks on transparent areas in the SVG not to go to the base canvas, I would use a (slightly modified) “dumb” solution: place a transparent rectangle under the contents of the SVG. Sort of:

 <svg> <rect width="100%" height="100%" pointer-events="all" fill="none"/> <!-- … everything else … --> </svg> 

With fill = none and pointer-events = all, rect will not be visible, but it will still receive mouse events and prevent them from navigating to the base canvas. So, if you put a click listener in an SVG, SVG will still get clicks, not the canvas. (You can also apply this technique to the G element, although you probably want to position the rectangle correctly rather than using 100% width and height.)