@font-face in css crashes ie8

[alexfiedler]

When using font-face within our embedded css, ie8 would crash. After some looking, i found this issue

webpack-contrib/style-loader#8

The browserify-css code is vulnerable to the same problem. When I attached the dom object to the head before the inner html was updated, the browser no longer crashed, the fonts loaded, and the rest of the styles looked correct.

I've opened up a pull request

[cheton]

Hi Alexfieldler,

Since it only happened on IE8, I'd prefer to make the bug fixing only specific to IE8 and earlier versions. For example:

createStyle: function(cssText, attributes) {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');

    style.type = 'text/css';

    for (var key in attributes) {
        if ( ! attributes.hasOwnProperty(key)) {
            continue;
        }
        var value = attributes[key];
        style.setAttribute('data-' + key, value);
    }

    if (style.sheet) { // for IE9+
        style.innerHTML = cssText;
        style.sheet.cssText = cssText;
        head.appendChild(style);
    } else if (style.styleSheet) { // for IE8
        head.appendChild(style);
        style.styleSheet.cssText = cssText;
    } else {
        style.innerHTML = cssText;
        style.appendChild(document.createTextNode(cssText));
        head.appendChild(style);
    }
}

Could you help do the test again in your environment? Thanks.

[alexfiedler]

Done. The tests are working now locally and on the pull request. Thanks.

[cheton]

Fixed in v0.4.1