Head.js only loads the first stylesheet in IE9 and under

Question

We're using head.js to load some external resources for our website and we're facing a problem where it seems to stop loading the stylesheets after the first one has loaded.

head.js('/lib/bootstrap/docs/assets/css/bootstrap.css',
        '/lib/bootstrap/docs/assets/css/bootstrap-responsive.css',
        '/lib/angular-ui/build/angular-ui.min.css',
        // ...
        '/css/app.css');

head.js('/js/facebook.js',
        '/lib/json3/lib/json3.min.js',
        // ...
        '/js/cookieCheck.js',
        function() {
            angular.bootstrap(document, ['glide']);
        });

This all works fine in Chrome and Firefox, however as you can see from IE's developer console it only loads bootstrap.css: https://i.stack.imgur.com/CJO8d.png

No relevant errors are shown in the console either. The really strange thing is head.js loads all the Javascript files with no problem.

Has anyone experienced anything like this before?

Answer 1

There are reports from others about this with IE as well (eg https://github.com/headjs/headjs/issues/200)

The solution seems to be to split the css list up into multiple calls. I have this working with IE:

<script>

head.js("style.css")
    .js("style2.css")
    .js("style3.css")

</script>  

Hope this helps!