Android瀏覽器和背景可見性問題

我在Android Webkit瀏覽器中實現3D變換（特別是Y軸旋轉）時遇到了問題。我的實現與此示例類似：http://desandro.github.com/3dtransforms/examples/card-01.html 一個div通過-webkit-transform: rotateY(180deg);翻轉，但似乎-webkit-backface-visibility: hidden;沒有任何效果，因爲div的背面始終可見。下面是運行Android 4.1的Android模擬器截圖：Android瀏覽器和背景可見性問題

Where is the front div?

這到底是怎麼回事？該示例在iOS Safari上運行良好。這是一個已知的Android錯誤，有沒有什麼辦法可以解決這個問題？

來源

2012-12-14 Eelke

可能的重複http://stackoverflow.com/questions/7455502/webkit-backface-visibility-not-working – Dementic

我在Chrome/WinXP上也遇到過這個錯誤。
您可以使用下面的解決方法：

HTML

<div id="container"> 
    <div class="card" id="card1">1</div> 
    <div class="card" id="card2">2</div> 
</div>

CSS

.card { 
    width: 150px; 
    height: 200px; 

    position: absolute; 
    top: 50px; 
    left: 50px; 

    color: #FFF; 
    font-size: 100px; 
    text-align: center; 
} 

#card1 { 
    background-color: #F00; 
    z-index: 1; 
} 

#card2 { 
    background-color: #00F; 
    z-index: 0; 
    -webkit-transform: rotateY(-180deg); 
} 

#container { 
    -webkit-perspective: 700px; 
} 

#container #card1 { 
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear; 
} 

#container #card2 { 
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear; 
} 

#container:hover #card1 { 
    z-index: 0; 
    -webkit-transform: rotateY(180deg); 
} 

#container:hover #card2 { 
    z-index: 1; 
    -webkit-transform: rotateY(0deg); 
}

我使用的線性回落至能夠一次Z-索引交換。
您可能需要稍微調整一下視角。

的jsfiddle：http://jsfiddle.net/dwUvR/3/

來源

2012-12-23 22:57:39

嘗試添加translateZ陪你旋轉：

因此直線上升卡：

-webkit-transform: rotateY(0deg) translateZ(2px);

而翻轉卡：

-webkit-transform: rotateY(180deg) translateZ(-2px);

應該有，因爲既沒有深層次的矛盾卡的兩側仍將隱藏背面可見性。

來源

2012-12-18 21:18:53 chrisgonzalez

似乎沒有任何影響（Android 4.0/4.1） – Eelke

有了這個錯誤報道對我的科爾多瓦Android應用..他們是在4.1.2 .. GS2 ..它安裝在genymotion，並改變了背面的我的索引，翻轉時，比前面更高...它的工作原理。它已經被破壞了一年。：\

來源

2014-12-22 23:26:11 jfaron

Android瀏覽器和背景可見性問題

回答

相關問題