cloneNode() changes attribute value in InternetExplorer 10 and 11

Question

When I call cloneNode() on an element with the name feGaussianBlur that has the attribute stdDeviation, InternetExplorer (10 and 11) always converts the value to 1.72443e+009.

Here is a four-liner that illustrates the problem: https://jsfiddle.net/kytbh4Ls/6/

If you change the element name, use a different attribute name or run the fiddle on any other browser (Chrome, Firefox), everything runs as expected. Using a different attribute value will not change anything.

What could be the reason for this really strange behaviour? And is there something that can be done about it?

Here a modified fiddle using jQuery's clone() instead of cloneNode(), unfortunately producing the same result: https://jsfiddle.net/kytbh4Ls/7/

Answer 1

This is a clear bug in Internet Explorer. While it is true that Internet Explorer uses the stdDeviation instead of stdDeviationX and stdDeviationY, the cloneNode() function has no business in messing around with the attributes. It should return a clone of the node, not a node with changed attributes.

You should report this to the Internet Explorer development team (if you have the the time to do so). Currently all you can probably do is to implement a manual workaround.

Answer 2

The problem is that IE does not use the stdDeviation attribute. Instead it uses stdDeviationX and stdDeviationY.

See this fiddle... FIDDLE

Here is the Microsoft page for feGaussianBlur

var element = document.createElementNS('http://www.w3.org/2000/svg', "feGaussianBlur");
element.setAttribute('stdDeviationX', 5);
element.setAttribute('stdDeviationY', 5);

var clonedElement = element.cloneNode();

alert("Original:" + element.getAttribute("stdDeviationX") + ", Cloned:" + clonedElement.getAttribute("stdDeviationX"));