d3.mouse may not observe SVG viewBox on IE9 and IE10?

[bradallen]

I found that the 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.

[mbostock]

Did you intend to have two nested SVG elements?

<svg id="test1" version="1.1" viewBox="0 0 500 500" width="500" height="500">
  <svg id="testSVG" preserveAspectRatio="none" version="1.1" viewBox="0 0 1000 1000" width="500" height="500">
    …
  </svg>
</svg>

[mbostock]

I’ll investigate, but even if there’s a bug, I probably won’t be able to do anything about it because workarounds for getScreenCTM tend to be difficult and more generally, D3 is not a compatibility layer; see #67 and #68 for related issues. In most cases a fix will probably have to wait until the GeometryUtils API is widely available in browsers (and obviously that will only help if it’s implemented reliably).

[mbostock]

I’m not able to reproduce this bug on IE10. The followMe rect follows the mouse as expected, even with the presence of a viewBox. I wasn’t able to capture the mouse cursor and take a screenshot simultaneously, so you’ll have to trust me that the mouse is directly over the middle of the red followMe box here:

It’s true that the SVG position and the client position are different, but that is expected because the SVG uses a different coordinate system (due to the presence of the viewBox). Thus, the SVG position is correct in the context of the SVG coordinate system.

[bradallen]

Thanks for looking into this. 👍

[mbostock]

Okay, also seems fine on IE9, even with the redundant SVG elements.

I wouldn’t be surprised if there are bugs in getScreenCTM in IE <Edge, but the particular case of viewBox seems to be working fine here.

[bradallen]

@mbostock Just out of curiosity, do you think a retina display might play a role in this issue?

[mbostock]

Yeah, that’s a good guess. Though I don’t know whether it’s an issue with IE + HiDPI displays or an issue specific to IE + VirtualBox + HiDPI.

[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"