Tuesday, January 17, 2012

HTML5 Learnings - Getting IE9 to Accept Canvas Elements

Working with HTML5 at the moment is a lot like the "good old days" of designing pages to work in IE, then redoing the page for Navigator (oooh, showing my age in the industry there!)

Anyhows, today's little lesson was about a small subtly in IE9 behaviour when handling a page incorporating Canvas elements. Initial I was working on the page in Web Expression, and viewing the page via a "file://..." path in the IE9 address bar. All was fine, and the JavaScript rendering the canvas element content worked OK.

But then I copied the HTML into a page being served up through IIS, and accessed via an "http://..." address. Looking at this new page, IE9 now tells me that the canvas element is not supported (modernizr adding the "no-canvas" class to the html element). Weird. Much playing later, found that it is necessary to add the following header metatag to the page:

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

Seems that IE treats pages accessed from the file-system differently that those from an http address!

No comments: