CSS旋转的Andr​​oid 4.0的WebView不适用 [英] CSS rotation not applied in Android 4.0 webview

问题描述

我建设有PhoneGap的Andr​​oid应用程序。我的屏幕的四角由一个覆盖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），所有的Andr​​oid 2.x的自动真空淀积系统，但是当我推出一个4.0 AVD图像的旋转丢失（定位作品它的方式应该）。这是在AVD，在Android中4的错误的错误还是我失去了一些东西？任何输入AP preciated，谢谢！

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:

咩！

推荐答案

尝试使用所有类型的旋转只是要确定。

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旋转的Andr​​oid 4.0的WebView不适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！