android - CSS 转换 Android Webkit 中的背面可见性

Question

我正在开发一个使用 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 中的错误还是我做错了什么？

Answer 1

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

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

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