Android Browser Issues and Feedback - Visibility

Question

I am having problems implementing 3D transforms (in particular, the rotation of the Y axis) in the browser of the Androids web browser. My implementation is similar to this example: http://desandro.github.com/3dtransforms/examples/card-01.html Div is flipped through -webkit-transform: rotateY( 180deg ); , but it seems that -webkit-backface-visibility: hidden; has no effect, since the back of the div is always visible. Here is a screenshot from Android 4.1 emulator:

What's going on here? The example works on iOS safari. Is this a known Android bug, is there a way around this?

Answer 1

I also experienced this error in Chrome / WinXP.
As a workaround, you can use the following:

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

I use linear attenuation to be able to replace z-index.
You may have to play a little with perspective.

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

Answer 2

Try adding translateZ to accompany your rotations:

So the map is straight up:

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

And inverted card:

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

There should be no depth conflicts, since both sides of the map will still have hidden visibility on the back.

Answer 3

If this error were reported in my Android Cordova app .. they were on 4.1.2 .. gs2 .. set it to genymotion and changed my back side index when it flipped to be higher than the front side. and it works. it was broken like this for a year.: \