CSS轉換Android Webkit中的背面可見性

我正在開發一個使用CSS轉換和3D轉換的基於移動web的頁面。我遇到了Android 3.1 Webkit的bug，我似乎無法找到解決方案。CSS轉換Android 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中的錯誤還是我做錯了什麼？

來源

2012-01-04 hanskan

不是它有幫助，但-webkit-backface-visibility：hidden;如果分配給它的元素包含任何表單元素，則會導致Android（2.3）上的所有類型的破壞。 – frequent 2012-02-09 08:55:07

您是否正在製作Android應用程序？如果是這樣，你需要通過添加這AndroidManifest.xml中啓用硬件加速：

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

如果你正在做一個真實的網站，http://thewebrocks.com/demos/3D-css-tester/可以幫助你斷定它是否是一個問題，你在做什麼，或者隨着瀏覽器的實施。

來源

2012-09-04 06:18:12 exclsr

CSS轉換Android Webkit中的背面可見性

回答

相關問題