Android2.2と2.3でtransform:rotateが効かなくなるバグ

CSS3の tranform:rotateをつかうと、要素をすきな角度に傾けられますが
Android 2.2 と 2.3 では、user-scalable=noとposition:fixedがそろうと、これが効かなくなるバグがあります。

  • metaタグのviewportで、ピンチイン・ピンチアウトでのズームイン・ズームアウトを禁止するuser-scalable=noを設定
  • 親要素に、固定配置のposition:fixed; を設定している

たとえば、こんなふうに画面の下端に矢印つきのボタンをつけるスタイルなんかがバグの影響をうけます。

<br />
&lt;div class=&quot;fixed&quot;&gt;<br />
	&lt;a class=&quot;button&quot;&gt;NEXT&lt;/a&gt;<br />
&lt;/div&gt;<br />

<br />
.fixed {<br />
	position: fixed;<br />
	bottom: 0;<br />
	left: 0;<br />
	right: 0;<br />
	height: 66px;<br />
	padding: 12px;<br />
}<br />
	.button{<br />
		position: relative;<br />
		display: block;</p>
<p>		dispaly: block;<br />
		height: 42px;</p>
<p>		font-size: 18px;<br />
		font-weight: bold;<br />
		line-height: 42px;<br />
		text-align: center;</p>
<p>		color: #fff;<br />
		background: #4797BC;<br />
		border-radius: 6px;<br />
	}<br />
	.button:after {<br />
		content: '';<br />
		position: absolute;<br />
		right: 12px;<br />
		top: 50%;<br />
		width: 9px;<br />
		height: 9px;<br />
		margin-top: -7px;</p>
<p>		border-top: 3px solid #fff;<br />
		border-right: 3px solid #fff;</p>
<p>		-webkit-transform: rotate(45deg);</p>
<p>	}<br />

このとき厄介なのは、fixedとrotateを優先したいから user-scalable=noをyesに変える対応ができないことです。

GALAXY S2で確認したところ、user-scalable=yesになると、こんどはfixedが効かなくなるバグが発生…
妥協点としては、こんなところでしょうか。

  • fixed配下のものだけは矢印を背景画像にする
  • Android 2.2と2.3では矢印の装飾をあきらめる
  • fixedをあきらめる

関連記事