html - 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..