iPhone / Android 向けウェブページでの transform:translate3d 導入 疑問編

こんにちは。 Web 担当の真谷（シンガイ）です。 スマートフォンのページを作成している際に、【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方の記事を参考に要素のアニメーションを実装していたのですが、transform:translate3d を使用した場合の端末毎の差異があったので、ご紹介します。 サンプル move をタッチすると input type=”text” の要素が移動する以下のサンプルをスマートフォンで見た場合に、端末毎に差異が発生します。 動作確認環境：iPhone / Android

[genhou]

Androidでtranslate3dを適用したinput要素のフォーカスがズレる。おかげて異常なスクロールが発生する件。

[hiro_y]

translate3d使った場合にAndroidで領域がずれる問題

[kkeisuke]

iPhone と Android の違い。Android では端末毎に差異。CSS3

[macky1207]

ちょうわかりやすい

[juner]

ほほぅ。QT:iPhone / Android 向けウェブページでの transform:translate3d 導入 疑問編