HighCharts 3.0.4 fails to initialise graphs in IE8 in complex pages (PATCH)

[mcayland]

We found a problem on our website whereby HighCharts 3.0.4 would fail to render on some of our more complex pages containing multiple charts in IE8. Some investigation showed that the issue was caused by hitting the limit of 31 stylesheets that exists when using .createStyleSheet().

The simple patch below has been verified to solve the issue on our website using the workaround given at http://msdn.microsoft.com/en-us/library/ie/ms531194%28v=vs.85%29.aspx.

https://gist.github.com/mcayland/6250145

[TorsteinHonsi]

Your patch works in IE8 Standards mode, but fails when the Compatibility button is down.
I tried replacing the relevant code with this:

            // setup default css
            styleSheet = doc.createElement('style');
            styleSheet.cssText =
                'hcv\\:fill, hcv\\:path, hcv\\:shape, hcv\\:stroke' +
                '{ behavior:url(#default#VML); display: inline-block; } ';
            doc.documentElement.firstChild.appendChild(styleSheet);

But the results are the same, no VML vector graphics are showin in IE8 Compatibility mode.

[mcayland]

We found a client who uses the code with compatibility view forcibly enabled and so we had to develop a workaround for this ourselves.

Please review the https://gist.github.com/mcayland/6250145 for a revised patch that works in both compatibility and normal modes on IE8 according to developer tools.

[TorsteinHonsi]

I'm sorry, still not working in IE8 Quirks mode. Now it complains about an invalid argument to the addRule method.

[mcayland]

Hmmm so it seems that quirks mode has a bug whereby .addRule fails if using CSS selectors that require escaping (such as those using the namespace prefix hcv).

I've updated the gist once again at https://gist.github.com/mcayland/6250145 which works by appending to the .cssText property (similar to the original version) and this appears to work on all of the modes I can select using IE8 developer tools on my test page which kept hitting the 31 stylesheet limit.

Can you confirm the same in your tests?

[TorsteinHonsi]

Yes, I confirm that this works across all IE versions and quirks combinations we're testing. I am committing a condensed rewrite of the fix.

[TorsteinHonsi]

And thanks so much for the contribution!

[mcayland]

Thanks for the update! I've manually applied your version of the diff and tried it on my original test page, and it works without any problems so this is definitely resolved.