CSS 旋转未应用于 Android 4.0 webview

发布于 2025-01-07 10:15:48 字数 1094 浏览 0 评论 0原文

我正在使用 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 中运行）：

2.2 AVD Screenshot

这是 4.0 中发生的情况：

< img src="https://i.sstatic.net/mMe35.png" alt="4.0 AVD 截图">

呸！

原文

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>

and 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);
}

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!

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

2.2 AVD screenshot

This is what's happening in 4.0:

4.0 AVD screenshot

Meh!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吐个泡泡 2025-01-14 10:15:48

为了确定起见，请尝试使用所有类型的旋转。

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

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

回复收藏 0 原文

~没有更多了~