html5 shiv causes IE8 rendering issue (Gray charts)

[rayhatfield]

I've run into an issue where charts were rendering all gray, and it appears to be an incompatibility between highcharts (version 2.1.9 of 2011-11-11) and the html5 shiv (aka html5 shim). When the shim is included in the page, I get this:



If I remove the shim, I get what I expect:



I haven't chased this down completely, but it appears that when the shiv is present, the highcharts 'tracker' overlay elements, which are supposed to be almost entirely transparent, render fully opaque.

I'm mostly posting this because it took me a while to figure out and I'm hoping this will save someone some time chasing the same issue.

If someone knows of a solution other than removing the shim from the page, I'd love to hear it.

[dmnd]

I encountered this issue too. I've worked around it in my app by disabling html5shiv before a call to Highcharts.Chart, and re-enabling it once the call completes. See https://khanacademy.kilnhg.com/Repo/Web ... 99e2662392 for my implementation.

It'd be great to fix the root cause of this issue in either Highcharts or html5shiv though.

[berkelep]

dmnd opened a ticket for this on the html5shiv/m repo: https://github.com/aFarkas/html5shiv/issues/21

[berkelep]

You can (and it's safer if you do) reference a local version of html5shim. That way you won't be unwittingly impacted by changes to that file. Maintainer of that project suggests using v2.2 of the shim (https://github.com/aFarkas/html5shiv/is ... nt-3293043). I've tried this and that version doesn't cause errors with highcharts.