asciimoo/cssplot

cssplot stacked bar chart IE8 rendering problem

Opened this issue · 3 comments

jamesbriggs commented

Hi authors.

Two of the cssplot demos at https://asciimoo.github.io/cssplot/ display correctly in IE8 (bar chart with percent and twin bars with no numbers) but the rest of the samples are not recognizable as charts.

It might be a minor tweak to fix these, so please take a look at them in IE8.

I have an IE8 machine available, so let me know if you need additional testing.

Thanks, James.

jamesbriggs commented

I don't have a patch yet, but so far I've identified 2 CSS display problems on IE8:

  1. display: flex; is CSS3, which IE8 doesn't support. Adding cssplot.ie.css using CSS2 display options and changing the old CSS files to display: table; just before each display: flex;can likely fix that.

<!--[if lte IE 9]> <link rel="stylesheet" type="text/css" href="/css/cssplot.ie.css" /> <![endif]-->

(Unfortunately, the flexibility.js polyfill is reported to only work up to 2009 flex usage in the general case. I don't know if that means it won't help cssplot though, since this is a specific use case.)

  1. scaleY(-1) is also CSS3. A proposed workaround is to use IE 'filter' and some additional IE CSS2:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */

I did a minimal 5-line div/ul/li test on IE8 and rotation=3 works from Javascript on the enclosing div element. To make it work using CSS-only, the div element must occupy space (have a CSS height, width or other property that forces space-filling) or nothing will appear to happen.

http://www.jebriggs.com/ie8-rotation-js.html

  1. Note: for valid display testing, the original IE version must be used, not an online test or an original IE in compatibility mode. Also, you may need to check for quirks mode as that can change rendering.

Thanks, James.

asciimoo commented

@jamesbriggs thanks for the detailed report and for the suggested solution. Could you provide a patch which solves the issue?

jamesbriggs commented

asciimoo: There is no general solution possible to add cssplot support for IE8 or IE9, since they do not have CSS3 support. However, there is about a 50% chance somebody can look specifically at which CSS3 features are needed for the barcharts and implement just that subset as a polyfill, as IE8 and IE9 do have advanced proprietary features for many things.