to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

一部のAndroidで、selectボックスにCSSのtransformプロパティをあてるとボックスが展開できなくなる

こんにちは。x-fitチーム・エバンジェリストの渡辺です。
 
HTML上の要素を移動・変形させる方法として、CSSのtransformプロパティがあります。Androidでは、このtransformプロパティでの動作不具合が多いことは有名ですが、フォーム要素に影響を与える事例をご紹介します。
 
 
 

HTMLソース

以下のようなHTMLを準備して確認してみます。
 
<html>
<head>
	<title>select box test</title>
	<meta name="viewport" content="width=device-width, user-scalable=no"/>
	<style type="text/css">
	  #s1 {
	  	-webkit-transform : translate(20px,20px);
	  	transform : translate(20px,20px);
	  }
	  #s2 {
	  	margin: 20px;
	  }
	</style>
</head>
<body>
  <form>
  	<div id="container">
	  	<select name="sel" id="s1">
	  		<option value="1">1</option>
	  		<option value="2">2</option>
	  		<option value="3">3</option>
	  	</select>
  	</div>
  	<br/>
  	<div id="container2">
	  	<select name="sel" id="s2">
	  		<option value="1">1</option>
	  		<option value="2">2</option>
	  		<option value="3">3</option>
	  	</select>
	</div>
  </form>
</body>
</html>
 
ブロック要素のdivの中に、フォームとselectボックスがあります。selectボックスに、transformプロパティを使って上と左に余白を指定してみます。
もう一つのselectボックスには、marginプロパティで余白を指定します。
 

確認結果

Android2.3の端末で、transformプロパティを指定したselectボックスは、タップしても内容が展開されず、機能しなくなりました。もう一つのselectボックスは正常に機能しています。Android2.3以外のバージョンではこの現象は確認されませんでした。
通常、selectボックスのようなフォームの要素にtransformプロパティを指定することはないと思いますが、この現象は、selectボックスの親要素に指定されていた場合も発生します。
 

回避策

この現象を回避するには、コンテンツのツリー上にselectボックスがある場合、その親要素も含めてtransformプロパティを使用しないようにするしかありません。
Android2.3は、2.x系では一番シェアの高いバージョンかと思いますので、selectボックスを使用するサイトでは注意が必要です。selectボックスが展開されない場合は、transformプロパティをチェックしてみることをお勧めします。
 
 
 

 

タグ: 
このエントリーをはてなブックマークに追加