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/可以帮助您确定您正在做的事情或浏览器实施是否存在问题。

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

1 个答案: