Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding styles with @font-face crashes IE8 #8

Closed
szag opened this issue May 28, 2014 · 2 comments
Closed

Adding styles with @font-face crashes IE8 #8

szag opened this issue May 28, 2014 · 2 comments

Comments

@szag
Copy link

szag commented May 28, 2014

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>
@sokra
Copy link
Member

sokra commented May 28, 2014

Would you like to send a PR?

@szag
Copy link
Author

szag commented May 30, 2014

Sorry for the late reply. I'm pressed for time at the moment. I hope I can get to do the pull request next week. If you are able to perform the change in the meantime I would appreciate that as well :)

@sokra sokra closed this as completed in a6e95f7 May 31, 2014
@alexfiedler alexfiedler mentioned this issue Mar 27, 2015
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sokra @szag