Androidとtransformとinputのバグ

3D系のtransformの後ろに入力フォームがあった場合、Androidで挙動がおかしくなります。

<style>
#d3d{
	-webkit-transform:translate3d(0,0,0);
}
</style>
<div id="d3d"></div>
<input type="text">

サンプル

device-2012-02-28-183637.png

入力フォームにフォーカスを当てると、入力フォームの上によくわからない入力フォームが出現してtap-highlight-colorの位置もおかしくなってしまいます。

根本的な解決策はないのですが、次のようにfocus時にopacityを0にすることでそれっぽくすることはできます。

input:focus{
	position:relative;
	left:-5px;
	top:-10px;
	padding:10px;
	opacity:0;
}

サンプル

ただ、結構フリーズ率が高くなるのでお勧めはしません。

追記:2013年03月20日

コードを次のように変更すると発生しなくなりました。

<style>
#d3d{
	-webkit-transform:translate3d(0,0,0);
}
</style>
<div id="d3d">
</div>
<input type="text">

サンプル

代わりに、次の様なコードで発生するのを発見しました。

<style>
#d3d{
	-webkit-transform:translate3d(0,0,0);
}
</style>
<div id="d3d">
<input type="text">
</div>

サンプル

関連エントリー

Android2.2 とtransformのバグ
@keyframesとAndroid
続：Androidブラウザでviewportのwidth指定
スマートフォンとposition:fixedのバグ
Androidのposition:absoluteとフォームの問題

スポンサードリンク

«フロントエンドエンジニアを募集中 | メイン | jQuery Mobile初めての方にお勧めの記事»