CSS 转换 Android Webkit 中的背面可见性答案

【问题标题】：CSS transitions backface visibility in Android WebkitCSS 转换 Android Webkit 中的背面可见性
【发布时间】：2012-09-04 14:18:12
【问题描述】：

我正在开发一个基于移动网页的网页，该网页使用 CSS 过渡和 3D 变换。我遇到了 Android 3.1 Webkit 的错误，我似乎找不到解决方案。

我使用 CSS 旋转，因此我基本上有一个带有参数 backface-visibility: hidden; 的元素，然后我向该元素添加一个类以开始转换。

#flipper {
    -webkit-transform-origin: center center;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -webkit-backface-visibility: hidden;
}
.rotating-cover-effect {
    -webkit-transform: rotateY(180deg);
}

问题在于，在 Android（特别是 3.1）上，#flipper 的背面在旋转后仍然可见。 在 iOS 或桌面 Webkit 浏览器（即 Chrome、Safari）上，背景是正确隐藏。

这是 Android Webkit 中的错误还是我做错了什么？

【问题讨论】：

不是它有帮助，而是 -webkit-backface-visibility: hidden;如果分配给它的元素包含任何表单元素，则会对我的 Android (2.3) 造成各种破坏。

标签： android css

【解决方案1】：

您正在制作 Android 应用程序吗？如果是这样，您需要通过将其添加到您的 AndroidManifest.xml 来启用硬件加速：

<application android:hardwareAccelerated="true" ...>

如果您正在制作一个实际的网站，http://thewebrocks.com/demos/3D-css-tester/ 可以帮助您确定是您正在做的事情还是浏览器实现的问题。

【讨论】：