Android Webkit中的CSS转换背面可见性
我正在开发一个基于移动web的页面,使用CSS转换和3D转换。我在Android 3.1 Webkit上遇到了一个bug,我似乎找不到解决方案 我使用CSS旋转,所以我基本上有一个参数为Android Webkit中的CSS转换背面可见性,android,css,Android,Css,我正在开发一个基于移动web的页面,使用CSS转换和3D转换。我在Android 3.1 Webkit上遇到了一个bug,我似乎找不到解决方案 我使用CSS旋转,所以我基本上有一个参数为backface visibility:hidden的元素
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中的一个bug还是我做错了什么?你在制作Android应用程序吗?如果是这样,您需要通过将以下内容添加到AndroidManifest.xml来启用硬件加速:
<application android:hardwareAccelerated="true" ...>
可以帮助您判断这是您正在做的事情还是浏览器实现的问题。不是这样,而是-webkit backface visibility:hidden;如果分配给它的元素包含任何表单元素,就会对我的Android(2.3)造成各种破坏。