Dygraphs and IE9
1,487 views
Skip to first unread message
Dan Vanderkam
Mar 21, 2011, 11:56:40 PM3/21/11
to dygraphs-users
Hi all,
This is a somewhat lengthy update on the current state-of-the-art when it comes to dygraphs and Internet Explorer. If you just want something to copy and paste to make dygraphs work in all versions of IE, here it is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<!--[if IE]>
<script type="text/javascript" src="path/to/excanvas.js"></script>
<![endif]-->
I've updated the dygraphs home page and all tests to use this prologue. Here's the sequence that led to it:
1. IE9's native <canvas> support is great.
2. IE9 requires an HTML5 doctype to enable its native <canvas> support.
3. An HTML5 doctype puts IE8 in standards mode, which breaks excanvas.
4. excanvas can be fixed, but it requires a hack and doesn't work as well as in quirks mode.
5. Using a very magical incantation, we can get the right combination of IE document modes.
6. As a result of these, it might be time to try out FlashCanvas for dygraphs on IE8.
Before switching dygraphs.com over, I'd appreciate if a few users could hit this site in IE8 and let me know how it works:
(please browse http://dygraphs.com/fc-test/tests also)
Longer story...
A week ago, on March 14, Microsoft released IE9. The focus of IE9 is on HTML5 support, including a native implementation of the <canvas> tag. This was an exciting development because it meant that, for the first time ever, dygraphs could run natively on the most-recent versions of all the major browsers.
Because many sites rely on quirks in older versions of IE, IE9 will, by default, render all pages in "Quirks mode". This is basically IE5.5 and it most certainly does not feature a native canvas tag.
To tell IE9 that you're quirk-free and would like all the new HTML5 features, you need to preface your page with an HTML5 doctype:
<!DOCTYPE html>
<html>
...
</html>
All of the dygraphs documentation and test pages use this doctype.
This doctype is also recognized by previous versions of Internet Explorer and puts them into Standards mode, rather than Quirks mode. Unfortunately, IE8 standards mode changed some of the behavior of VML, which is what excanvas used to emulate the <canvas> tag.
At this point, there are three different directions to go:
1. Get IE to display in standards mode in IE9 but not in IE8.
2. Fix excanvas.js to work in IE8 standards mode.
3. Switch to a different <canvas> emulation system.
Let's look at each of these:
1. Get IE to display in standards mode in IE9 but not in IE8.
This would normally be done via a doctype, however, dygraphs is very much cutting against the grain by wanting IE9 standards mode but specifically wanting to avoid IE8 standards mode. There are a variety of sources of information about how to set the document mode from a web page, for instance:
Many of these resources are either incorrect, incomplete or outdated. I tried many different combinations of doctypes, conditional comments and <meta> tags before arriving at the magical incantation at the start of this email. I'm not entirely sure why it works, but it does seem to. It's fragile — if you reverse the order of the "IE=" clauses, it will break. MS typically goes to great lengths to avoid breaking existing behaviors, so if it works now, I believe that it will continue to work.
Just to be clear
- The <!DOCTYPE html> before the HTML suffices to get the native <canvas> tag in IE9.
- If you want to support IE8, you'll need the <meta> tag and the conditional excanvas include.
- If you only need to support IE7 and earlier, the <meta> tag is optional.
The snippet at the top of this email will always work, so you may as well just include it if you're going to support IE<9. The one quirk is that it will cause IE8 to render your page in IE7 standards mode. This isn't too big a deal, however, as relatively little changed between these two.
2. Fix excanvas.js to work in IE8 standards mode.
Microsoft changed quite a few things about VML in IE8, much to the consternation of VML users:
The update appears to have broken excanvas under some circumstances when used in IE8 standards mode. Dygraphs is one of these circumstances.
Reading around, I noticed this:
As Ronald B. suggests, commenting out one line in excanvas.js un-breaks it in IE8 standards mode:
// el.style.overflow = 'hidden'; // fix IE8
However, as the blogger complains, VML in IE8 standards mode doesn't work as well as VML in IE7 standards mode or Quirks mode. You're better off dropping into IE7 mode.
3. Switch to a different <canvas> emulation system.
FlashCanvas (http://flashcanvas.net/) is a drop-in replacement for excanvas. Instead of relying on VML to work in older versions of IE, it uses Flash. This has a couple of consequences:
- it's faster
- it's less subject to the whims of IE
- flash and the DOM can get out of sync, leading to odd animations when panning.
It's also being actively maintained, unlike excanvas (which hasn't been updated in over a year). My copy of IE8 is a little bit janky, so it's hard for me to tell exactly how well it works. The dygraphs.com home page doesn't load for me when using it, for example. That's why I'd appreciate some feedback from the community about the relative merits of excanvas and FlashCanvas.
Anyways, that's where we stand right now. Feedback, etc. much appreciated.
- Dan
Dash
Mar 22, 2011, 2:55:18 PM3/22/11
to dygraphs-users
Hi Dan,
thanks for the update and we all do appreciate your help and the free
gift!.
I have not tried IE7->IE9 yet, but just a quick feedback of IE8 use
(for the link http://dygraphs.com/fc-test/).
It seems to freeze and after a very long waiting the graph appears/
flashes once (which subsequently disappears) and then after some more
time, it sayys "Out of memory at line: 24" -> after sometime the
message is repeated for line 26 ... I have IE version 8.0.6001.18702
Update versions: 0.
Thanks,
Dash
> instance:http://ieblog.members.winisp.net/misc/How%20IE9%20Determines%20Docume...http://ieblog.members.winisp.net/images/MarcSil_IE8_Document_Mode_2.pnghttp://msdn.microsoft.com/en-us/library/ms537512(v=VS.85).aspxhttp://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-docu...http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspxhttp://hsivonen.iki.fi/doctype/
thanks for the update and we all do appreciate your help and the free
gift!.
I have not tried IE7->IE9 yet, but just a quick feedback of IE8 use
(for the link http://dygraphs.com/fc-test/).
It seems to freeze and after a very long waiting the graph appears/
flashes once (which subsequently disappears) and then after some more
time, it sayys "Out of memory at line: 24" -> after sometime the
message is repeated for line 26 ... I have IE version 8.0.6001.18702
Update versions: 0.
Thanks,
Dash
>
> Many of these resources are either incorrect, incomplete or outdated. I
> tried many different combinations of doctypes, conditional comments and
> <meta> tags before arriving at the magical incantation at the start of this
> email. I'm not entirely sure why it works, but it does seem to. It's fragile
> — if you reverse the order of the "IE=" clauses, it will break. MS typically
> goes to great lengths to avoid breaking existing behaviors, so if it works
> now, I believe that it will continue to work.
>
> Just to be clear
> - The <!DOCTYPE html> before the HTML suffices to get the native <canvas>
> tag in IE9.
> - If you want to support IE8, you'll need the <meta> tag and the conditional
> excanvas include.
> - If you only need to support IE7 and earlier, the <meta> tag is optional.
>
> The snippet at the top of this email will always work, so you may as well
> just include it if you're going to support IE<9. The one quirk is that it
> will cause IE8 to render your page in IE7 standards mode. This isn't too big
> a deal, however, as relatively little changed between these two.
>
> 2. Fix excanvas.js to work in IE8 standards mode.
>
> Microsoft changed quite a few things about VML in IE8, much to the
> consternation of VML users:http://ajaxian.com/archives/the-vml-changes-in-ie-8
>
> The update appears to have broken excanvas under some circumstances when
> used in IE8 standards mode. Dygraphs is one of these circumstances.
>
> Reading around, I noticed this:http://stackoverflow.com/questions/941170/does-anyone-could-make-exca...
> Many of these resources are either incorrect, incomplete or outdated. I
> tried many different combinations of doctypes, conditional comments and
> <meta> tags before arriving at the magical incantation at the start of this
> email. I'm not entirely sure why it works, but it does seem to. It's fragile
> — if you reverse the order of the "IE=" clauses, it will break. MS typically
> goes to great lengths to avoid breaking existing behaviors, so if it works
> now, I believe that it will continue to work.
>
> Just to be clear
> - The <!DOCTYPE html> before the HTML suffices to get the native <canvas>
> tag in IE9.
> - If you want to support IE8, you'll need the <meta> tag and the conditional
> excanvas include.
> - If you only need to support IE7 and earlier, the <meta> tag is optional.
>
> The snippet at the top of this email will always work, so you may as well
> just include it if you're going to support IE<9. The one quirk is that it
> will cause IE8 to render your page in IE7 standards mode. This isn't too big
> a deal, however, as relatively little changed between these two.
>
> 2. Fix excanvas.js to work in IE8 standards mode.
>
> Microsoft changed quite a few things about VML in IE8, much to the
> consternation of VML users:http://ajaxian.com/archives/the-vml-changes-in-ie-8
>
> The update appears to have broken excanvas under some circumstances when
> used in IE8 standards mode. Dygraphs is one of these circumstances.
>
Jeff D
Mar 25, 2011, 2:25:22 PM3/25/11
to dygraphs-users
Hello Dan,
I connected to the page fc-test page with IE8...
First time crashed the browser, and the second time I connected I got
22 identical javascript errors:
Unspecified error.
flashcanvas.js
Line 24
Char 56
And the browser crashed again.
I connected to the page fc-test page with IE8...
First time crashed the browser, and the second time I connected I got
22 identical javascript errors:
Unspecified error.
flashcanvas.js
Line 24
Char 56
And the browser crashed again.
Dan Vanderkam
Mar 25, 2011, 2:39:42 PM3/25/11
to vryx....@gmail.com, dygraphs-users
Yeah, feedback for FlashCanvas has been pretty uniformly negative.
Looks like we'll be sticking with excanvas and that strange <meta> tag
for the time being.
Looks like we'll be sticking with excanvas and that strange <meta> tag
for the time being.
- Dan
Reply all
Reply to author
Forward
0 new messages