Android4.2.2でデバッグしているときに、入力できなくなっているのを発見してからだいぶ死闘したのでメモ。

ドロワーメニューの中に入れてある検索ボックスをAndroidから確認していたら、動きは快適だったのだけれども入力ができなくなっていた。
検索boxにフォーカスを当てるとすぐに外れてしまう。
再度当てると、カーソルが点滅してやっと入力できそうな気配になるのだが、一文字入れると勝手に確定してしまい、続きを入力できなくなる。
もう一度やるとまた同じく一文字だけしか入力できない。
途中、怒って急激に連打すると何文字かは入れられるが、すぐに確定されてしまうので暗号めいた文字列を打ち込むことしかできない。

ドロワーメニュー特有のFIXEDの問題だとすぐに思った。fixedやabsoluteとinputやtextareaを絡めるとAndroidでは良いことがないのはよく語られている。

とりあえず何が問題かを探ることが大事だ。
検証として、position:fixedを外して、普通に入力できるかを試した。
これでもやはり同じ現象になった。

なので、問題はposition周りでないことに気がつくまでに1時間要してしまった。

javascriptもいちいちコメントアウトしていって、原因になっているfunctionを特定していった。
するとドロワーメニューにするために、メニューを一回appendTo()で移動している関数をコメントアウトすると、正常に動いた。

原因がわかってすっきりしたところで、はて、レイアウトとマークアップを見直すか、と考えるとうんざりした。
ドロワー用にもう一個メニューをHTMLに吐き出させるか、、、などと考えたりもした。あって悪い手ではないが、できればソースはシンプルに仕上げて開発に渡したい。

スマフォのブラウザはPCとはだいぶ違う方法でレンダリングしているようだ。
これはいろいろ見たり聞いたりしたことからの想像でしかないので決して確実な考えではないが、どうやらスマフォのブラウザはレンダリングしたときにボタンや入力フォームなどの位置を画面上の座標などで捉えているようなのだ。
appendToで要素を移動させたばっかりに、レンダリングしたときの位置がうまく取れないのだろう、と想像する。

ならばレンダリングが完了する前に移動させれば良いのではないかと思いついたのが解決につながった。

jQueryのappendToをload後に行っていたものを、loadが完了する前にappendToを行っておく。

ということで、javascriptの始めの方にappendToが発火するようにしたらうまく行った。