こんにちは。 Web 担当の真谷（シンガイ）です。
スマートフォンのページを作成している際に、【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方の記事を参考に要素のアニメーションを実装していたのですが、transform:translate3d を使用した場合の端末毎の差異があったので、ご紹介します。
サンプル
move をタッチすると input type=”text” の要素が移動する以下のサンプルをスマートフォンで見た場合に、端末毎に差異が発生します。
動作確認環境：iPhone / Android
move
以下が、手近にある端末でサンプルを確認したときの「端末名」「OS」「WebKit のバージョン」「現象」になります
| 端末 | OS | WebKit バージョン | 現象 |
| 初代 Xpelia | Android 2.1 | 530.17 | 視覚的には移動しているように見えるが、フォーカス要素自体が移動していない |
|---|---|---|---|
| Nexus One | Android 2.3.4 | 533 | 正常に要素は移動するが、フォーカスの位置がズレる |
| Galaxy S | Android 2.2.1 | 533.1 | 正常に要素は移動するが、フォーカスの位置がズレる |
| iPhone 3GS | iOS 4.0 | 532.9 | 正常に要素が移動し、フォーカスの位置のズレもない |
| iPhone 4 | iOS 4.3.2 | 533.17.9 | 正常に要素が移動し、フォーカスの位置のズレもない |
全端末で確認をした訳ではないのですが、Android では端末毎にかなり差異がありました。
勿論 WebKit のバージョンが若干違うのですが、同じ533のバージョンでも iPhone と Android の違いが顕著でした。
移動する要素によっては、スマートフォンによって違いがあるので、transform:translate3d の使い方も気をつけようと心に誓いました。
次回は解決編という事で、このような場合の解消方法を書こうと思います。
関連記事
