CSS旋转不适用于Android 4.0 webview [英] CSS rotation not applied in Android 4.0 webview

问题描述

我正在使用Phonegap建立一个Android应用程式。我的屏幕的角落被叠加的PNG图片变暗，标记如下：

I am building an Android app with Phonegap. My screen's corners are darkened by an overlaying PNG image, Markup looks like:

<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 AVDs，但是当我启动4.0 AVD时，图像的旋转丢失（定位工作的方式应该）。这是AVD中的错误，Android 4中的错误还是我在这里缺少的东西？任何输入值得赞赏，谢谢！

This works perfectly fine in all desktop webkit browsers, my phone (which is running Android 2.3.5), all Android 2.x AVDs, yet when I launch a 4.0 AVD the rotation of the image is lost (the positioning works the way it should). Is this a bug in the AVD, a bug in Android 4 or am I missing something here? Any input is appreciated, thanks!

这是它应该看起来像（运行在2.2 AVD）：

This is what it should look like (running in a 2.2 AVD):

这是发生了什么在4.0中：

This is what's happening in 4.0:

Meh！

推荐答案

尝试使用所有类型的旋转，

Try using all types of rotation just to be sure.

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 */

这篇关于CSS旋转不适用于Android 4.0 webview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！