メモ：Android4.2、4.3だけで起こるcssのtransform:skew();のバグ？

Photo by フリー写真素材ぱくたそ

ちょっと気持ち悪いバグ（？）っぽいものに遭遇したのでメモしておきます。
transrate:skew();を使った斜めデザインのコーディングをしている際に遭遇したものです。

下記のように、外側のタグと内側のタグにプラスマイナスで同じ角度のskewをかけて、外側のコンテンツの区切りをななめにするというコーディングがあります。

<div class="wrap">
  <div class="inner">メインコンテンツ</div>
</div>

.wrap{
  transrate:skew(20deg);
  overflow:hidden;
}
.inner{
  transrate:skew(-20deg);  
}

ほとんどのブラウザではこれで問題なく思った通りの実装ができますが、Android4.2と4.3だけで問題がおこりました。
4.2、4.3だと、hiddenが中途半端にだけ効いて内側のコンテンツ（画像や写真、テキストなど）はhiddenされるけど、バウンティボックス？的な範囲情報だけ幽霊のように残ってまっ白く表示されるという。。

z-indexなど重なりの影響は受けるようですが、その部分は本来内側に存在するコンテンツにどんなスタイルを当てても白くなり、ほんとゴースト状態でした…。

さらに気持ち悪いのが4.0や4.1では発生しないという点。なんなんでしょう。

一応苦肉の対応策はあって、30deg、-30degなどぴったり同じ角度じゃなければちゃんとoverflow:hidden;が効いてくれます。
つまり30.0001degとか、目視でわからないレベルで角度をずらせば4.2,4.3でも大丈夫でした。

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方
-Amazonで見る