Androidのテキスト入力のバグ
スマートフォンサイトで、オーバレイしたモーダル上にログインフォームを設置したところ、
メールアドレス・パスワードの文字入力時に、一文字打つごとに画面が上下に激しくスクロールされて、
打っている文字がとても視認できないという問題が発生した。
<div id="mask"></div>
<div id="Login">
<input type="email">
<input type="password">
</div>
<section class="content">
//メインのコンテンツ
</section>
/* 半透明の陰 */
#mask {
position: fixed;
z-index: 3000;
opacity: 0.7;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
/* ログインフォーム */
#Login {
position: absolute;
z-index: 4000;
width: 100%;
}
bodyをスクロール不能にする
検索してもあまり出てこなかったのだけど、
（だいたい検索ワードがよく分からない。「上下に揺れる」とかで検索したら・・・）
少ないながらも言及していた記事ではAndroid 2系に対応するならばモーダル上でテキスト入力させるのは諦めろという感じの論調だった。
そんな中でも参考になりそうな記事がこれ。
https://github.com/scottjehl/Device-Bugs/issues/32
この中に書いてある以下の対処で、異常なスクロールが発生する問題は直りました。
outline: none/overflow:hidden seen here
When working with dialogs, setting this on the
when opening and removing it again when closing a dialog seemed to help.
訳：ダイアログ（モーダル）が開く時にこれ（outline:none と overflow: hidden）を<body>タグにセットして、閉じる時に削除してやれば、うまくいくっぽい。
異常にスクロールしまくるのが問題なら、そもそもスクロールしない状態にすればいいじゃないか、ということのようだ。
ただし、bodyがスクロールしなくなるってことは、
#Login要素も position:absoluteではなくて、position:fixedにしないといけないだろう。
モーダルがページの中程に出現する仕様ならば。
モーダル要素が画面より大きい場合
ところがモーダルの中身が多くて、どうしてもスクロールを発生させなければならない場合は、上記の方法は使えない。
そこで、モーダル展開時に以下のような処理を追加した。
if(window.navigator.userAgent.toLowerCase().indexOf('android 2') != -1){
$("#mask").css({'position':'absolute','height':$('body').height()+'px'});
}
先の記事でも書かれているが、position:fixedが鬼門らしい。
所感
かなり以前にも同じバグにつまづいた経験があるが、
どう対処したのか忘れてしまっていたので、解決に戸惑った。
記事にしてしまうとかなりあっけないが、実際にこのおかげで数時間も足止めを食らった。
Android 2はいつまでシェアを食っているのだろうか。