search

asciimoo / cssplot

Pure CSS charts
https://asciimoo.github.io/cssplot
Other
782 stars 46 forks source link

cssplot stacked bar chart IE8 rendering problem #19

Open jamesbriggs opened 6 years ago

jamesbriggs commented 6 years ago

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 6 years ago

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]>

<![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.)

2) 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

3) 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 6 years ago

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

jamesbriggs commented 6 years ago

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.