Google’s excanvas only works in quirks mode for IE8

Recovered from the Wayback Machine.

I’m in the process of proofing Painting the Web, including testing all of the examples with the new IE8 beta. Yeah, fools rush in where angels fear to tread.

I was frustrated that all of my canvas examples weren’t working with IE8, even if I picked IE7 emulation mode. From a Google group I discovered that if I used quirks mode (ie, removed the DOCTYPE), the applications do work in IE8 and in IE7 mode, both. (Well, some of the applications–but at least I see some of the pieces with the ones that don’t work.)

I tried the meta tag and using IE7 strict mode, but it doesn’t work, though it doesn’t break as badly as IE8 standards mode. You see a box where the canvas rendering should be.

So, what this demonstrates is that Microsoft is dropping support for VML, but hasn’t implemented the HTML5 canvas element. More importantly, Microsoft doesn’t support VML in strict mode even if you’re running in IE7 mode. Jay-sus Microsoft, could you possibly leave things in worse shape?

However, further checking finds for us a Silverlight version of excanvas.js. Well, we knew that one was coming. Still, the problems with using Silverlight is that your page readers have to install Silverlight. Previously, all of the effort to translate canvas to Microsoft speak occurred without the reader having to install anything. This is a better approach that we no longer have. In addition, I don’t believe that Silverlight works with IE6, though I don’t know for sure, since I don’t have IE6 to test.

More importantly, this new JavaScript library works in IE7 emulation mode, but is pretty buggy in IE8 standards mode, though at least it works in Strict not Quirks. And, as long as you name the JavaScript files differently, you can include both JS libraries, which should enable the canvas applications to work with IE6. I don’t have access to check this out with IE6–I’m just making a guess. Having both libraries doesn’t break IE8, whether as IE8 or IE7 emulation. I don’t know if having both will break IE7. The real IE7.

Who’s on first?

Jay-sus Microsoft.

update MS does still support VML, I tried out a couple of pages that use VML directly and they work. The problem is in the excanvas.js library, then. It should work in IE7 emulation, because the examples did work with IE7. However, it doesn’t unless you also serve up the application in quirks mode (with no DOCTYPE).

I tried an SVN snapshot version of excanvas.js, the older one that’s still being developed, but it’s worse than the released version. However, that doesn’t mean that there won’t be a release of the non-Silverlight excanvas that will work with IE8 at some point.

Until then, currently:

The released version of excanvas.js only works in quirks mode for IE8, including running IE8 in IE7 emulation mode. Using the new meta tag doesn’t work, unless I used it incorrectly. I’m assuming one would use the following:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Do I have that wrong?

The Silverlight version of excanvas.js works in IE8 standards, and IE7 strict mode, but it’s not released yet, is still under development, and requires your page readers to install Silverlight. In addition, I don’t know that this library works with IE6.

I have included both in web pages, and assume one can use IE6 conditional statements to wrap the non-Silverlight option to ensure only IE6 picks it up:

<!--[if IE 6]>
<script type="text/javascript" src="originalexcanvas.js">

I have found, though, that when running IE in IE8 standards mode, most of the sample applications I had partially failed with the Silverlight version of the library. The only reliable results I received with IE8 was using quirks mode with the older excanvas.js library.

last update

Another area impacted by changes associated with VML is the mapping APIs provided by Google and Yahoo (non-Flash version). I’ve found if you do add the meta tag above, the applications mostly work. Some of the routing is off with Yahoo maps, but it’s close enough.

Print Friendly, PDF & Email