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

Question

我正在开发一个基于移动web的页面，该页面使用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

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

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

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