SVG icons disappears in Windows 10 IE 11 using jQuery Sortable

Question

I'm experiencing a really weird issue that only occurs in Internet Explorer 11 on Windows 10. When jQuery sortable stops the SVG icon inside the list element gets invisible. Works fine in Chrome and Edge and it doesn't seem to be a styling issue. I've managed to create this simple fiddle to show the issue as basic as possible.

http://jsfiddle.net/UAcC7/1666/

<svg>
   <use xlink:href="#icon-add" />
</svg>

$("#sortable").sortable();

Answer 1

To fix this bug you need to manually update the xlink:href value of the svg use tag each time it is added to the page. Check out this other post on using jquery to change the xlink:href attribute of svg elements for more info on why this works.

The best way to update the attribute is to use the jquery sortable stop method. Here is a jsFiddle that works: http://jsfiddle.net/t25hyyso/4/

$("#sortable").sortable({
  stop: function(event, data) {
    useElement = data.item[0].getElementsByTagName("use")[0];
    if (useElement.href && useElement.href.baseVal) {
      useElement.href.baseVal = useElement.href.baseVal; // trigger fixing of href
    }
  }
});