IE WrongDocumentError

[paulo-gyant]

Hi!

Firstly, thank you for your work!

I have a problem in IE where it throws WrongDocumentError while trying to replace the img element with the svg.

After looking into it, I found that other similar packages solved this same problem with a simple solution:

// Fix for browser (IE, maybe other too) which are throwing 'WrongDocumentError'
// if you replace an element which is not in the document
if (document.importNode) {
    injectElem = document.importNode(injectElem, true);
}

I tried it myself by adding it right before:

// Replace img element with new element. This is the actual injection.
parentNode.replaceChild(injectElem, imgElem);

And it fixed the issue :+1:

Any thoughts on this?

Thanks!

[waruyama]

Thanks for the feedback. Maybe you can provide some more details so we can try to reproduce this issue.

1. Which version of IE is this? IE11 or even older?
2. Can you provide a simple test case to reproduce the error? Or can you describe what is different from our examples in the documentation?

Thanks.

Edit: Removed one question that is answered in the original issue

[waruyama]

The documentation for Document.importNode() says that it creates a clone of the node is created. A similar method seems to be Document.adoptNode(), which moves the node from the original document to the new one without creating a clone. Maybe this is more appropriate for our purpose?

Can you try if using Document.adoptNode() solves the issue?

Here is the documentation for both functions: Document.importNode() Document.adoptNode()

[paulo-gyant]

Hey!

So the problem is happening on IE 11. I don't have a way to test it in older IE versions, sorry about that.

The only thing I think I'm doing differently is that the SVG injection happens inside an iframe.

I also confirm that Document.adoptNode() also seems to work:

// Fix for browser (IE, maybe other too) which are throwing 'WrongDocumentError'
// if you replace an element which is not in the document
if (document.adoptNode) {
    injectElem = document.adoptNode(injectElem);
}

Thanks for your time!