Android Browser und Rückansicht Sichtbarkeitsprobleme

Question

Ich habe Probleme mit der Implementierung einer 3D-Transformation (speziell einer Y-Achse) in Androids Webkit-Browser. Meine Implementierung ähnelt diesem Beispiel: http://desandro.github.com/3dtransforms/examples/card-01.html Ein div wird durch -webkit-transform: rotateY(180deg); gewendet, aber es scheint, dass -webkit-backface-visibility: hidden; keinen Effekt hat, da die Rückseite des div immer sichtbar ist. Hier ist ein Screenshot aus dem Android Emulator 4.1:

Was ist hier los? Das Beispiel funktioniert auf iOS-Safari gut. Ist dies ein bekannter Android-Fehler, gibt es eine Möglichkeit, dies zu umgehen?

Answer 1

Ich habe diesen Fehler auch auf Chrome/WinXP erlebt.
Sie könnten die folgenden als Abhilfe verwenden:

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); 
} 
​ 

Ich bin mit dem linearen Lockerung der z- zu Zeit in der Lage sein Indexwechsel.
Sie müssen vielleicht ein wenig mit der Perspektive herumspielen.

JsFiddle: http://jsfiddle.net/dwUvR/3/

Answer 2

Versuchen Sie, eine translateZ Hinzufügen Ihre Drehungen begleiten:

So gerade nach oben Karte:

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

und blätterte Karte ist:

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

Es sollte, da beide keine Tiefe Konflikte Seiten der Karte haben immer noch eine versteckte Rückseite.

Answer 3

dieser Fehler auf meiner cordova android app berichtet hatte .. sie auf 4.1.2 waren .. GS2 .. installiert es auf genymotion, und änderte mein Index der Rückseite, wenn umgedreht, um höher zu sein als die Vorderseite .. und es funktioniert. Es ist seit einem Jahr so ​​gebrochen. : \