Android版 Firefoxで描画がおかしくなったらブラウザを再起動

2013/07/22

こんにちは。きんくまです。

Canvas使ったものを作っていて、Android版Firefoxでデバッグしてたら、挙動がおかしくなったことに気がつかず、時間をかなりロスしたというお話です。これは、端末に依存する現象かもしれないので、Firefoxが悪いとかそういうことをいいたいわけじゃないです。ただ、たまたま同じように時間をロスしない人が出ないといいなと思って書いてマス。

最初に結論から書くと、「挙動がおかしく感じたら、メニューから終了を選択して一度完全にアプリを終了させて、もう一度起動する！」です。

で、どんな挙動だったかといいますと、タッチイベント（touchstart, touchend）のときに、画面の再描画がかからないといったものでした。
例えば、あるdivにタッチイベントをしかけておいて、そのイベントがきたら、別のところのテキストを変えたり背景色を変えるとします。それでタッチしてみるのですが、画面に全く変化がないのです。イベントが上手く発動してないのかな？と思って、他のところを触ったりすると、さっき変わってなかったところが、意図したように変わっているのです。

挙動を調べてみると、

イベントも発動している
DOMやCSSの操作も終わっている
でも再描画処理がかからない！？

そのため、画面に変化がなくなっているような感じといったらよいのでしょうか、、。
んで、何かのきっかけで再描画処理が走ると、さきほどのところが変化していることが確認できる。

で、一度こういう状態になると、新規で別のタブを開いて、別サイトを見てみたりしても、同じ挙動になってしまいます。Yahooのトップページの真ん中あたりのニュース部分の箱になっているタブメニューも押しても画面が切り替わらないみたいな。

おかしいなおかしいなと、いろいろとスクリプトを修正してみる。が、直らず。
リモートデバッグを試してみたせいかと思い、設定をオフにしたり、PCも再起動したりしてみるも直らず。

困ったなあと思っているときに、メニューに「終了」メニューがあることを発見。
ためしに、落として、ブラウザの再起動してみたらみごとに直ったという。

慣れない環境だと原因特定するのに時間かかりますよね。
まー、そんな感じのお話でした。