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

こんにちは。 Web 担当の真谷（シンガイ）です。 前回、疑問編ということで、スマートフォンでなめらかなアニメーションを表現する為に transform:translate3d を使用した場合に、Android では要素によっては不具合が発生する件について書きました。今回はその解決方法をご紹介します。 解決後のサンプル まずは前回の解決後のサンプルをご覧ください。 （move を押下すると テキストフィールドが 70px 移動し、もう一度押下すると戻ります。） 動作確認環境：iPhone / Android 前回確認を行った、Xpelia・Nexus One・Galaxy S 等の Android 端末で確認を行いましたが、フォーカス要素がちゃんと移動後の位置に来ている事を確認できました。 以下が JavaScript の抜粋になります。※要 jQuery if($("#search").

[nilab]

iPhone / Android 向けウェブページでの transform:translate3d 導入 解決編 (フェンリル | デベロッパーズブログ) : 「一度 transform 解除をした場合、再設定をした時点の座標が始点になる」

[juner]

メモ:iPhone / Android 向けウェブページでの transform:translate3d 導入 解決編