10

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();
2
  • I contacted Microsoft support and got the following response: I did some digging around, and found that indeed Internet Explorer does not support loading from an ‘external’ source. It seems the case is that it displays correctly initially, as we have some partial compatibility, but breaks when trying to perform the move operation (since full compatibility is not guaranteed).
    – peeh
    Oct 20, 2015 at 7:09
  • They provided the following links: developer.mozilla.org/en-US/docs/Web/SVG/Element/use -> table at the bottom confirms no IE support github.com/jonathantneal/svg4everybody -> library that allows all browsers to see SVG uniformly wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… -> reported issue is for Edge, but it also applies to IE. As you can see from the first comment (MSFT employee) it is included in Insider Build 10547.
    – peeh
    Oct 20, 2015 at 7:10

1 Answer 1

5

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
    }
  }
});

1
  • Works great in IE! Jun 21, 2017 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.