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]-->
The dygraphs home page and all tests now use this prologue. Here's the sequence that led to it:
- IE9's native <canvas> support is great.
- IE9 requires an HTML5 doctype to enable its native <canvas> support.
- An HTML5 doctype puts IE8 in standards mode, which breaks excanvas.
- excanvas can be fixed, but it requires a hack and doesn't work as well as in quirks mode.
- Using a very magical incantation, we can get the right combination of IE document modes.
- As a result of these, it might be time to try out FlashCanvas for dygraphs on IE8.
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:
- Get IE to display in standards mode in IE9 but not in IE8.
- Fix excanvas.js to work in IE8 standards mode.
- Switch to a different <canvas> emulation system.
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:
- http://ieblog.members.winisp.net/misc/How%20IE9%20Determines%20Document%20Mode.svg
- http://ieblog.members.winisp.net/images/MarcSil_IE8_Document_Mode_2.png
- http://msdn.microsoft.com/en-us/library/ms537512(v=VS.85).aspx
- http://blogs.msdn.com/b/ie/archive/2010/03/02/how-ie8-determines-document-mode.aspx
- http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
- http://hsivonen.iki.fi/doctype/
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-excanvas-work-in-ie-8-with-jquery/1740754#1740754
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.
Hi, Robert!
ReplyDeleteThank you for IE issues explanation.
I've tried to integrate dygraphs in my drupal-based site and I noticed an interesting issue with IE8. If the tag <meta http-equiv="X-UA-Compatible" ...> is not a first child of <head> then IE doesn't draw anything, except chart labels.
That's not an obvious behavior.
It would be great if you drop a line about this issue in documentation section about IE compatibility (http://dygraphs.com/#ie)
Selecting your content management system is highly significant I use Drupal. Because When I learned the most innovative education websites use Durpal, I pulled the trigger For our Drupal hosting I selected Pantheon with SFTP access to build on-server What platform do you develop on?
ReplyDeleteDrupal Dedicated Hosting