IE11 SVG font-face bug
20th April 2016
I'm adding a post about this strange bug I came across in case anyone else has the same issue and is struggling to find the cause.
A project I was working on involved pre-loading a bunch of SVG images. During browser testing it was discovered that Internet Explorer 11 would crash when either refreshing or leaving the site without any error messages.
After a lot of trial and error the bug was narrowed down to being the loading of an SVG via Javascript which has an embedded css font-face declaration results. The following example demonstrates this.
The Code
#broken.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<defs>
<style type="text/css">
/* <![CDATA[ */
@font-face {}
/* ]]> */
</style>
</defs>
<text>SVG Text</text>
</svg>
#script.js
var image = new Image();
image.src = 'broken.svg';
Note that the font-face can be empty without any fonts actually being loaded and it will still result in crashing.