SVG line markers not updating when line moves in IE10?

Question

I have some SVG lines with line markers on them, and I have a script that moves those lines around. This works fine on all browsers, including IE9.

However, I just tried it on IE10, and the line markers get left behind when the line moves.

An example of this can be seen here: http://jsfiddle.net/swYRK/8/

I have tried this on both Windows 7 and 8.

Anyone know what's going on? Is this an IE10 bug, or is there another way to move the line and markers?

(Note the actual application is very performance sensitive, so I very much want to avoid doing something like re-creating the lines every frame while I move them, or something.)

-

Edit: this seems like a real IE 10 bug. I've found one open issue in the IE bug tracker (which requires a Microsoft account to even see, which makes it not visible to Google. Hello?), which I have added information to. IE has yet to accept the issue.

If there are any other work-arounds that people can think of, that would be great to hear. Completely removing the end markers, rendering that, and then re-adding them works-ish (shows visible flashing), but would not be acceptable in my application, unfortunately.

Answer 1

This is a quick way of doing it, that works well. I have not noticed any flickering or performance related issues.

Simply re-add the svg node in it's original place:

if (navigator.appVersion.indexOf("MSIE 10") != -1) {
    svgNode.parentNode.insertBefore(svgNode, svgNode);
}

Of course, you could use any browser sniffing of choice..

Answer 2

I want to elaborate a little on the amazing answer given by @ChristianLund and how I used it successfully in my code

In my force animation, I have a tick function that looks like this:

force.on("tick", function() {
  ...
});

I also hold all of my graph links inside the link variable, defined like so:

var link = svg.selectAll(".link").data(links).enter() ...

Now, to implement the magic suggested by Christian, I've added this line in the beginning of my tick function:

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

This seems to fix the IE 10 problems... of course it's recommended to add this patch only on IE 10

Answer 3

In ie10/11, I found that the line does not move when it with marker-start/marker-end atrribute, I tried to remove those atrributes in your example, and it works. So the idea is remove the atrributes before set the x/y, then reset the atrributes after all jobs done.

Answer 4

You may try this hack:

$("#button4").click(function () {
$("#line1")[0].setAttributeNS(null, "x1", 50);
$("#line1")[0].setAttributeNS(null, "y1", 50);
$("#line1")[0].setAttributeNS(null, "x2", 150);
$("#line1")[0].setAttributeNS(null, "y2", 50);
var oldAttValueDisplay = $("#line1")[0].getAttributeNS(null, "display");
$("#line1")[0].setAttributeNS(null, "display", "none");
setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", oldAttValueDisplay);}, 0);
// static: setTimeout(function() {$("#line1")[0].setAttributeNS(null, "display", "block");}, 0);    

});