FN1210002 - Internet Explorer 9でEaselJSのコンテンツが表示されない

HTML5テクニカルノート

Internet Explorer 9でEaselJSのコンテンツが表示されない

ID: FN1210002

Technique: HTML5 and JavaScript

EaselJSが用いるHTML5のCanvasとInternet Explorer 9との互換性の問題です。

01 問題

EaselJSで描いたコンテンツが、ごく単純な内容でもInternet Explorer 9/Windowsで表示されない場合があります。EaselJSにかぎらず、HTML5のCanvasを使ったコンテンツで起こり得る問題です。

02 原因

HTML5のcanvas要素は、Internet Explorer 9で新たにサポートされるようになりました(Internet Explorer 9開発者ガイド「HTML5 canvas要素」)。ただし、過去のバージョンとの互換性を保つため、バージョン7から9までの複数の互換モードをもっています。しかし、Canvasを使うには「Internet Explorer 9標準モード」でなければなりません(10 million bugs in my life.「IE9 Canvas・・・IEが互換性にどれほど苦しめられているかの一例」参照)。

03 対処法

前出「Internet Explorer 9開発者ガイド」の「標準規格サポートによる相互運用性の強化」につぎのような注意が記されています。

重要 Internet Explorer 9 での新しい標準規格のサポートでは、ブラウザーを Internet Explorer 9 標準モード ("IE9 モード") に設定する必要があります。これを行うための最適な方法は、標準の !DOCTYPE ディレクティブを使用し、X-UA-Compatible meta タグまたは HTTP ヘッダーを使用しないことです。IE9 モードに設定するための !DOCTYPE は次のとおりです。

<!DOCTYPE html>

Canvasを使うときは、HTMLドキュメントに必ずDOCTYPE宣言を加えて「Internet Explorer 9標準モード」に設定します。

作成者: 野中文雄
作成日: 2012年10月4日