Android 2.2の不具合

スマートフォン対応サイトにて、Galaxyで<input>にfocusをあてると、ウィンドウが変にスクロールしてしまうという問題が報告された。

いろいろ調べてみると、Android 2.2 では対応していないCSS3 Animationの指定をすると誤動作する、ということらしい。

jQTouchの場合

http://code.google.com/p/jqtouch/issues/detail?id=398

下記のようにCSSをデフォルト値で上書きすると症状がおさまる。ただし、iOSや2.2以外のAndroidにも影響を与えてしまう（画面遷移の際に点滅したりする）ので、UAで判定をかけてAndroid 2.2の場合だけ以下の指定になるように改造する必要がありそうだ。

  body { -webkit-perspective: none;
   -webkit-transform-style: flat;
  }

  body>*{
    -webkit-backface-visibility: visible;
    -webkit-transform: none;
  }

jQuery Mobileの場合

https://github.com/jquery/jquery-mobile/issues/issue/292

  -webkit-backface-visibility

参考）
http://stackoverflow.com/questions/4270208/css3-animation-flicker-on-android-2-2-webkit-transformtranslate-scale-a

以上、情報を提供してくれた佐藤さんに感謝。日本語の情報がなかなか見つからなかったので、書いてみました。

スマートフォン向けサイトをつくっていると、つくずくAndroidは発展途上のOSなんだな、と感じてしまう。iOSはそろそろ成熟してきたところなんだろうけどね。