Webエンジニア susumuis の技術ブログ

このブログの内容は個人の見解であり、所属する組織の公式見解ではありません

IE8 Canvas 印刷問題

Canvasを使った案件に携わっています。が、何かの間違いで、IE8もサポートしなければならなくなり半泣きです。画面レンダリングだけでなく、印刷もサポートしなければなりません。

画面ではドラッグアンドドロップでグリグリ動かすのですが、excanvasではスピードが遅すぎて使い物になりません。この問題については、FlashCanvasがサクサク動くので採用しました。(それでもある程度のチューニングは必要でした)
問題は印刷で、flashcanvasだと、

  • 縦横比が変
  • 周りに変な背景色が付く
  • 解像度が悪い

一方excanvasを使用すると、これらの問題が解決します。つまり

  • 縦横比問題なし
  • 変な背景色なし
  • 解像度が綺麗(ここらへんVMLの強みだなあと思います)

ということで、画面でグリグリ動かすのはflashcanvas、印刷するならexcanvasでリリースしました。
ところが、ページ送りが変になる不具合が発生しました。(印刷ページでは、縦幅を事前に計算して、CSSのpage-brake-beforeを使って、ページ送りを制御しています。) その現象というのが、

「キャンバスの途中でレンダリングが切れ、代わりに次のページの上部に現れ、Canvas以外の文字列を潰してしまう」

というものです。「互換モード」だとうまくいくので、もしかしたらうっかり、私がIE7互換モードでテストをしてしまったのかもしれません。そんなはずないのですが……。倍率を十分小さくして、50%くらいにすると、回避できるのですが、そうすると、文字が小さすぎて読めなくなります。結局用紙の半分くらいまでしか出力できない状態です。
それにしても、互換モードで動くとは。やはり、IE8でのVMLサポートは微妙だったと言うことなのでしょうか?

解決編

これを書けば互換モードで動く(それかよ!)

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

まあ、どうせIE9が出るまでの応急処置だし。