SVG "use" elements disappear on Windows 10 - by Sebastian Mueller

Status : 

  Not Reproducible<br /><br />
		The product team could not reproduce this item with the description and steps provided.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.


ID 2337112 Comments
Status Closed Workarounds
Type Bug Repros 1
Opened 2/8/2016 9:09:12 AM
Access Restriction Public

Description

Using Internet Explorer 11 on Windows 10 (version 11.63.10586.0, updates 11.0.26), but not on Windows 8.1, IE messes up "use" element cross references in SVG DOMs. When the elements are moved in the DOM using "element.insertBefore()", the use elements' visualization disappears.
Sign in to post a comment.
Posted by Sebastian Mueller on 3/24/2016 at 12:38 AM
Thanks Ibrahim.

Just to clarify: This never reproduced on Edge - it's Internet Explorer 11 that is broken by this regression in Windows 10 only. With MS Edge still being of beta quality at best with regard to SVG support, the only way to get adequate SVG support in a browser in Windows 10 is to use a third party browser. That's really sad, because Edge's standard conformance is really good if you leave away SVG. But sadly HTML5 without SVG is not HTML5. So no HTML5 with Win10 and MS for now.

Thanks for the update anyway and acknowledging that you won't be fixing the bugs that you just introduced for Win10. So much for backwards compatibility. And sorry for the rant, but the situation is just terrible: I really like Windows 10 but we need to tell our customers to stay on Windows 8.1 or switch browsers until the showstoppers are fixed, and it doesn't seem as if the bugs are anywhere near to being actively worked on.
Posted by Microsoft on 3/23/2016 at 12:16 PM
Hello Sebastian Mueller,

Based on recent testing the issue no longer repros and will be closed out to reflect this. Should you happen to see the problem as still active in Win 10 / MS Edge please feel free to activate the feedback and reply.
Please note that we are not working on IE feature bugs any longer at this time unless they are security related.

All the best,
The MS Edge Team
Posted by Sebastian Mueller on 2/9/2016 at 6:34 AM
Turns out this happens in the following cases: When an element or one of its children references an element in a defs section that is not inside the DOM subtree and that element is touched in the DOM (using insertBefore, replaceChild, or appendChild) the link to the defs element breaks. (Probably the cross reference is marked as invalid as soon as the element is (temporarily) removed from the DOM and not reevaluated once the element gets reinserted into the DOM.

The following (rather CPU expensive) code snippet can be used to "fix" an SVG DOM subtree that has been reinserted/reappended/replaced:

function fixHrefs(node){
         var walker = node;
        
         // start leftmost in walker subtree
         while (walker.firstChild !== null){
            walker = walker.firstChild;
         }
         // now we are at the bottom left
         while (walker !== node){
            // fix walker
            if (walker.href && walker.href.baseVal) {
             walker.href.baseVal = walker.href.baseVal; // trigger fixing of href
            }
            
            // if there is a subtree on the right of the walker, go the the bottom left of the right subtree...
            if (walker.nextSibling !== null){
             walker = walker.nextSibling;
             while (walker.firstChild !== null){
                walker = walker.firstChild;
             }
            } else {
             // no sibling, subtree is done - go to parent
             walker = walker.parentNode;
            }
         }
        
         // fix root
         if (walker.href && walker.href.baseVal) {
            walker.href.baseVal = walker.href.baseVal; // trigger fixing of href
         }
        }
Posted by Microsoft on 2/8/2016 at 10:25 AM
Hello Sebastian Mueller,

We appreciate your feedback and sorry to hear that you consider Edge is not sufficient for SVG. As you might already know we're not presently working on feature bugs in Internet Explorer outside of security-related issues. However we will investigate this issue further and keep you posted about our resolution. Thank you again for your assistance in the investigation.

Best regards,
The Microsoft Edge Team