IE9 mouse eventing issues

[wtritch]

I've created a jsfiddle to demonstrate the issue at:
http://jsfiddle.net/0fL37xem/6/

Notice that the tooltip is out of alignment and the click handler never fires for the graph on the right.

IE9 is having issues detecting mouse locations. It looks like the result from d3.mouse(svgElement) is returning bad x/y values.
After a little digging it looks like this might be related to a 2-year-old D3 issue ?

[pimlinders]

+1

[bradallen]

I did some digging and found that d3's point function uses SVGMatrix.getScreenCTM().inverse() to get a transformation matrix (which looks something like { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}).

IE10 and IE9 seem to double the values for e and f. When I divided those values by 2 I was able to get the correct positioning. I found a jsfiddle example of the problem and modified it to show how a potential fix could work: http://jsfiddle.net/LwZFb/5/

Just uncomment the the lines to see it working in IE9 & IE10.

I was hoping to be able to fix this in c3, but I think an issue will have to be created for d3 to address this.

Edit: I've opened an issue with d3 d3/d3-selection#72

[bradallen]

I just want to follow up and confirm that this is indeed an issue caused by retina displays. This issue is pretty much only relevant to developers. I turned off 3D Acceleration, changed the resolution setting in Parallels to "Scaled" and changed the display settings in the system preferences on my Mac to Scaled: "Default"