Search code examples
d3.jssvgcanvasz-indexdom-events

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

I am building an interactive visualization app that is pretty much all client-side Javascript, see here:

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

Try the following controls:

  • mousewheel: zoom
  • drag empty area: pan
  • drag bottom area or handles: pan/zoom
  • click once, then click again: draw a box
  • drag on box: move box
  • drag edges of box: resize

The underlying mechanism is a SVG overlying a canvas. The canvas has z-index 0 and the SVG z-index 1 - feel free to inspect the DOM. Everything works pretty much fine on Chrome/Firefox.

The problem is, in IE9, the canvas seems to receive click events over the SVG, even with a lower z-index. You can tell because the mousewheel/click/drag actions don't work in the main chart area, yet they work in the edge areas because the SVG is slightly larger than the canvas and it picks up the events there. For example, try mousewheeling in the axis areas or the bottom.

After playing with it some more, I think I saw the pathology. I made a version of the page where I allowed boxes to be drawn outside the canvas (graph) area but still inside the SVG. Then I could do the following (in IE):

  1. Draw a box in the axis area (outside of canvas)
  2. Drag it into the main area (over the canvas)
  3. Hold mouse over the box and use mousewheel - now the zoom events are picked up by the SVG. Mousewheeling where there was no box caused the events to go to the canvas (disappear.)

So it seems what is happening is that the SVG is only picking up mouse events when there is an explicit SVG object under the mouse, otherwise it gets passed through to the canvas, and only in Internet Explorer.

One obvious way to solve this problem is to make a transparent rect over the entire SVG region, but that seems stupid. Also, maybe I'm doing something wrong that is patched up when using Chrome but broken in IE. Does anyone have any suggestions?

Note: One (deleted) answer suggested wrapping the entire SVG region in a <g> element and applying pointer-events: all to it. However, that didn't work. I don't even think that is necessary, as pointer events are being detected fine in the entire SVG region except where there is a canvas.

Solution

  • If you want to prevent clicks on transparent regions in the SVG from going through to the underlying Canvas, then I would use a (slightly modified) "stupid" solution: put a transparent rect underneath the SVG contents. Something like:

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

    With fill=none and pointer-events=all, the rect won't be visible, but it will still receive mouse events and prevent those from going through to the underlying Canvas. So, if you put a click listener on the SVG, the SVG would still receive the clicks rather than the Canvas. (You can apply this technique to a G element as well, though you'll probably want to position the rect explicitly rather than using 100% width and height.)