CSS 旋转不适用于 Android 4.0 webview

Question

我正在使用 Phonegap 构建一个 Android 应用程序。我的屏幕角落被覆盖的 PNG 图像变暗，标记看起来像：

<div id="tl" class="corner"></div>
<div id="tr" class="corner"></div>
<div id="bl" class="corner"></div>
<div id="br" class="corner"></div>

和 CSS：

.corner{
background: url('img/corner.png');
position: fixed;
z-index: 5;
width: 120px;
height: 120px;
}
#tl{
top: 0;
left: 0;
}
#tr{
top:0;
right: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#br{
right: 0;
bottom: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#bl{
bottom: 0;
left: 0;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}

这在所有桌面 webkit 浏览器、我的手机（运行 Android 2.3.5）、所有 Android 2.x AVD 中都可以正常工作，但是当我启动 4.0 AVD 时，图像的旋转会丢失（定位有效它应该的方式）。这是 AVD 中的错误、Android 4 中的错误还是我在这里遗漏了什么？任何意见表示赞赏，谢谢！

这应该是它的样子（在 2.2 AVD 中运行）：

这就是 4.0 中发生的事情：

嗯！

Answer 1

尝试使用所有类型的旋转以确保安全。

transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */