Adding styles with @font-face crashes IE8 #8
Description
I noticed that the style-loader can crash IE 8 forcing it to close. I used the IE8 - XP virtual machine from modern.ie (IE 8.0.6001.18702) to test an application that adds a stylesheet containing a @font-face declaration.
The problem seems to be that the cssCode is added to the styleElement before the styleElement is appended to head. Changing the order so that the styleElement is part of the DOM-tree when setting the cssCode fixes the crash:
var styleElement = document.createElement("style");
styleElement.type = "text/css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(styleElement);
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}Maybe this is caused by IE security checks (also see related issue) applied to @font-face, because adding other styles without @font-face works with the existing implementation.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<script type="text/javascript">
(function() {
// webpack output with urls replaced
var cssCode = "@font-face {\n font-family: \"Example\";\n src: url("+"Example.eot"+"#iefix) format(\"eot\"), url("+"Example.woff"+") format(\"woff\"), url("+"Example.otf"+") format(\"opentype\"); }"
var otherCssCode = "body{ background-color: red;}";
// works
// addStyle(otherCssCode);
// addStyleFixed(otherCssCode);
// crashes
addStyle(cssCode);
// works
// addStyleFixed(cssCode);
function addStyle(cssCode) {
if(true) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(styleElement);
return function() {
head.removeChild(styleElement);
};
}
function addStyleFixed(cssCode) {
if(true) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
var styleElement = document.createElement("style");
styleElement.type = "text/css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(styleElement);
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
return function() {
head.removeChild(styleElement);
};
}
}());
</script>
</body>
</html>