IE 9 Aborts CSS Loading When Preprocessed

Enabling CSS aggregation solves the problem, but isn't always possible. Attached is a patch that disables preprocessing on both CSS files, which solves the issue in a more modular fashion.

Enabling CSS aggregation will solve the problem, but isn't always possible. It's always possible to selectively turn off preprocessing, which is what the patch in #1 does, and that solves the problem. Read on for why.

This is not the @import limit bug you mentioned. I'm aware of that bug, but there are nowhere near 31 @imports, nor are there nested @imports. I can replicate this on a stock Drupal instance with the Bartik theme, and the only modules enabled are CKEDITOR, Libraries, and LinkIt.

The only meaningful changes between Drupal's outputs pre-patch and post-patch are in the JSON returned by the AJAX POST to linkit/dashboard. Specifically, in the insert command:

Broken in IE 9:

{"command":"insert",
"method":"prepend",
"selector":"head",
"data":"\u003Cstyle type=\u0022text\/css\u0022 media=\u0022all\u0022\u003E@import url(\u0022http:\/\/example.com\/modules\/overlay\/overlay-parent.css?n438us\u0022);\u003C\/style\u003E\n\u003Cstyle type=\u0022text\/css\u0022 media=\u0022all\u0022\u003E@import url(\u0022http:\/\/example.com\/sites\/all\/modules\/linkit\/better-autocomplete\/better-autocomplete.css?n438us\u0022);\n@import url(\u0022http:\/\/example.com\/sites\/all\/modules\/linkit\/css\/linkit.css?n438us\u0022);\u003C\/style\u003E\n",
"settings":null},

Working in IE 9:

{"command":"insert",
"method":"prepend",
"selector":"head",
"data":"\u003Cstyle type=\u0022text\/css\u0022 media=\u0022all\u0022\u003E@import url(\u0022http:\/\/example.com\/modules\/overlay\/overlay-parent.css?n438og\u0022);\u003C\/style\u003E\n\u003Clink type=\u0022text\/css\u0022 rel=\u0022stylesheet\u0022 href=\u0022http:\/\/example.com\/sites\/all\/modules\/linkit\/better-autocomplete\/better-autocomplete.css?n438og\u0022 media=\u0022all\u0022 \/\u003E\n\u003Clink type=\u0022text\/css\u0022 rel=\u0022stylesheet\u0022 href=\u0022http:\/\/example.com\/sites\/all\/modules\/linkit\/css\/linkit.css?n438og\u0022 media=\u0022all\u0022 \/\u003E\n",
"settings":null},

As you can see, the only difference is the pre-patch JSON inserts a style tag with @import, and the post-patch returns a link tag. Just to be sure, I dumped the DOM after invoking LinkIt, and even counted the outer document as well as all iframes within it, then counted all @imports: there were 27.

Actually, it's a known bug with Internet Explorer that after the initial page processing, dynamically created style elements will not be evaluated (you need to use the old createStyleSheet method: http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx).

You can readily replicate the bug (there will only be one @import here, so it's definitely a different problem):

dynamic_style_ie_broken.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>dynamic_style_ie_broken.html</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
    function doStyleImport() {
      var style = '<style type="text/css" media="all">@import url("dynamic_style_ie_broken.css?n438us");</style>';
      $("head").append(style);
    }
    </script>
  </head>
  <body>
    <form>
      <p>
        Insert stylesheet via &lt;style&gt; @import:<br />
        <input type="button" onclick="doStyleImport();" value="Turn the Background Green!" />
      </p>
    </form>
  </body>
</html>

dynamic_style_ie_broken.css

body {
  background: green;
}

The above example works in everything but IE.

Hooray! Thanks much, and especially for the quick turnaround!