フェンリル

Developer's Blog

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

WebDevBlogTitle

こんにちは。 Web 担当の真谷(シンガイ)です。

スマートフォンのページを作成している際に、【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方の記事を参考に要素のアニメーションを実装していたのですが、transform:translate3d を使用した場合の端末毎の差異があったので、ご紹介します。


サンプル

move をタッチすると input type=”text” の要素が移動する以下のサンプルをスマートフォンで見た場合に、端末毎に差異が発生します。

動作確認環境:iPhone / Android

以下が、手近にある端末でサンプルを確認したときの「端末名」「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 の使い方も気をつけようと心に誓いました。

次回は解決編という事で、このような場合の解消方法を書こうと思います。

Facebook コメント

コメント

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。