Androidでmask-imageとanimation,transformが併用できない

Androidでは、CSS3のmask-imageをanimationやtransformと併用すると
mask-imageが無効になるバグがあります。

mask-imageとは

CSS3のmask-imageは、通常の要素(↓の例は画像だが画像でなくてもよい)に
logo_retina.png

透過png画像のalpha値(不透明度)を反映させるCSSです。
alpha

実例はこんな感じ。(サンプルはwebkitを想定した仕様になっています)
logo_retina.png

<img src="http://webdev.jp.net/wp-content/uploads/2013/03/logo_retina.png" alt="logo_retina.png" width="240" height="40" class="test_maskimage" />
.test_maskimage{
	-webkit-mask-box-image:url(/wp-content/uploads/2013/04/alpha.png);
}

リフレクトを再現しようとしたらAndroidのバグに躓いた

このmask-imageを使用してリフレクト効果をつけようとしたところ、Android のバグで躓いてしまった。

順当にCSS3でリフレクトを実現する場合、mask-imageでグラデーションマスクをかけた上で
transformのrotateXで画像を垂直方向に反転させます。
こんな感じ↓

logo_retina.png
logo_retina.png

<img src="http://webdev.jp.net/wp-content/uploads/2013/03/logo_retina.png" alt="logo_retina.png" width="240" height="40" /><br>
<img src="http://webdev.jp.net/wp-content/uploads/2013/03/logo_retina.png" alt="logo_retina.png" width="240" height="40" class="reflect" />
.reflect{
	-webkit-mask-box-image:url(/wp-content/uploads/2013/04/alpha.png);
	-webkit-transform: rotateX(180deg);
}

が!?Androidのバグの影響でmask-imageはtransformを併用すると無効になってしまいます。
無念…

見た目上はこうなります。
logo_retina.png
logo_retina.png

transformのほか、animationもmask-imageと併用できないもよう。
残念だなぁ…

参考サイト:
WebTecNote – [CSS3] Androidのmask-imageに関する不具合について

関連記事

Pocket