transform:rotate()をつかってCSSで矢印を書いたのですが Android2.3でrotateが正常に機能しない状態に遭遇しました。

調べたところによるとtransform: translate3d();を使用すると それ以降にscale()、rotate()、skew()を使っているところがうまく機能しなくなるようです。

例えば下記のような場合


<div class="rotate"></div>
<div class="rotate"></div>
<div class="rotate"></div>
<div class="translate3d"></div>
//ここから下の処理はrotateしなくなる。
<div class="rotate"></div>
<div class="rotate"></div>
<div class="rotate"></div>
.rotate{
  translate: rotate(45deg);
}

.transform{
  translate: transform3d(20px, 0 ,0);
}

上のコードで言うとclass=“translate3d"よりあとのrotateは機能しません。 このバグはAndroidの2系に起こるようです。

こちらに対応させる場合は translate3dを使わず、translateX,translateY,translateZで対応すれば可能です。

他にもこちらの記事にtranslate3dのバグについて詳しくまとめてあります。 とても参考になりました。ありがとうございました。

Androidの標準ブラウザにおいてtranslate3dが引き起こす不具合について | BALLOG