CKEditor4のダイアログの表示がバグる

CKEditor4を使って画面を作っていたらいつしかダイアログの表示がバグるようになった。

ダイアログが完全に表示されず半分ほどで表示が止まってしまったり、後ろのレイヤーだけが表示されたりする。

ウィンドウサイズを変更するとその直後は描画されるので描画系の問題のようだ。

発生した時の各バージョンは以下の通り。

• Chrome 27.0.1453.116
• CKEditor 4.1.1

他のバージョンで発生するかどうかは不明だが、Firefox 21.0 では発生しなかった。

原因発見の兆し

しばらく原因不明で保留していたが、最近別のところを触っていて偶然問題を起こしているコードを発見した。

同じ画面内にCanvasを配置してタイマーで一定時間ごとに描画をしていたのだが、Canvasへの描画やクリアがダイアログの描画に影響しているようだ。

対策

Canvasの描画やクリア時に何が起こっているのか、という原因調査は時間がかかりそうだったので飛ばして対策を考えることにした。

要するにダイアログを開いている間はCanvasへの描画を止めれば良いのだと思う。

そこでCanvasを非表示にしたりタイマーを止めたりしてみたものの問題は解決せず。

いろいろ試してみてたどり着いたのが以下の方法。

# CKEDITOR.on('instanceReady')内で以下のようなコードを実行(CoffeeScript)
evt.editor.on 'dialogShow', (evt) ->
  $('#canvas')[0].width = 0

evt.editor.on 'dialogHide', (evt) ->
  $('#canvas')[0].width = 600

 ダイアログを開くときにCanvasの幅を0にし、閉じたときに元の幅に戻してる。

幅が0のCanvasは描画が行われないようだ。実際のコードでは念のためタイマーの停止と再開で描画処理も行わないようにしている。

今回は偶然ダイアログ描画に影響を与えているコードが見つかったが、思いもしないところだった。

運が良かった。