IE close and reopen tab

[kevinkace]

I haven't yet been able to narrow down the exact cause of this issue, but getting an error in IE11 where the tab is closed/reopened (just see a few flickers), and an error msg pops up:

[Keyamoon]

Any updates on this?

[kevinkace]

Not much, sorry. I've been having a hard time narrowing down the exact issue, or even a simple repro. It was consistently happening on the one site (https://competitive.guildwars2.com/en) it was occurring on, but I've since removed svgxuse (no SVGs is better than site crashing 😆).

Best I've found is it seems related to number of SVGs being rendered. I'll look into it again today, but feel free to close this issue as it seems pretty unique.

[vasiliraby]

I had the same issue with svg4everybody in IE11. Besides it crashed sometimes. With this plugin I don't have such problems. But there are some other problems:
• Uncaught TypeError: Cannot read property 'split' of null [Chrome]
• TypeError: g[h].getAttributeNS(...) is null [FF]
• And some error that prefix is not bound to a namespace and a reference to icons.svg (I suppose that this polyfill omit some xml attribute) [FF]

[Keyamoon]

@vasiliraby If you can provide a reduced test case, it would help a lot.

[vasiliraby]

@Keyamoon
I've found out that some issues arise when we have empty elements. The structure like that:
<svg class="ui-icon ui-icon--x-small"><use></use></svg>
This approach is used to occupy the space with no icon.

I've just put empty xlink:href="" attribute and it works.

[Keyamoon]

@vasiliraby Thanks for the info. I just tried that in IE11 but couldn't reproduce this issue. Here's my test case: https://icomoon.io/svgxuse-demo/test-issue23.html

[vasiliraby]

@Keyamoon Try your example in Firefox. It throws TypeError: g[h].getAttributeNS(...) is null.

BTW I thought that your polyfill works only in browsers that do not support external source for svg use elements. But in Firefox this polyfill also change links and insert symbols from source svg into DOM.

[Keyamoon]

@vasiliraby Thank you. This last commit fixes it. Let me know if it also fixes the IE issue.

Regarding your other question, svgxuse works by detecting empty SVG elements. This means that if it finds any empty SVG elements for any reason, it kicks in and tries to pull in the referenced SVG (if any). Therefore, if the browser hasn't yet fetched the SVG, the polyfill may send a request for it as well. But if you check the network tab (in Chrome or Firefox), you should only see one request per referenced SVG file. It's either the polyfill that sends the request first or the browser itself. The other one should get canceled. One benefit of this approach is that svgxuse also fixes the issue of linking to SVGs on other domains, which fail by default with an error like the following, resulting in empty SVGs:
Unsafe attempt to load URL X from frame with URL Y. Domains, protocols and ports must match.

[vasiliraby]

@Keyamoon I didn't experience any issues in IE with svgxuse.
With new version of svgxuse:

• there is no errors about getAttributeNS(...) is null OR cannot read property 'split' of null
• Firefox doesn't insert symbols from svg file into body anymore.

Thanks for the update.

[Keyamoon]

@vasiliraby Glad to hear that.
@kevinkace Could you try the new version and IE to see if you're still experiencing the re-opening issue?

[kevinkace]

I'm away from my computer but will test tomorrow.

[kevinkace]

I was still able to repro, though seemed less frequent. Hard to know if related.

[merkledo]

I have the same issue in IE 11 as @kevinkace . After the tab is closed and reopened the browser shows an error message and I can't debug the error.
I use Version 1.1.22 of svgxuse.

[Keyamoon]

@merkledo Can you provide a reduced test case?