css flipped block interaction with non flipped, only webkit specific

Question

okey, simple css flip

.container  
  .flipper.A
     .front  
     .back
  .flipper.B
     .front
     .back

it's important for me, that .front and .back both have negative top and left absolute position and .flipper dimensions is 0x0

when flipper A is rotatedY 180deg, so .back is visible, it incorrectly interacts with other .flippers if their positions intersect. For example, i click on links in flipper B, but can't click on links in flipper A, if A is over B

working example is here http://jsfiddle.net/attenzione/g2at2/ - you almost can click on test 1, instead click on test 3

such situation only appear on webkit browser

any help with it? is this webkit bug?

Answer 1

Just bring the div that you want to be in front towards the front (in 3d space)

CSS

div.flipped {
    -webkit-transform: rotateY(180deg) translateZ(-1px);
    z-index: 2;
}

the translateZ moves it towards you

corrected fiddle

Answer 2

Is there a reason why your inner .block has absolute positioning? This is what is causing the issue. If you must use absolute positioning on the inner block then there are two ways round this.

You could overflow hidden the outer element (.flipper) Or you could add pointer-events:none on the unflipped element, bear in mind this only works back to IE9

You should really try not to use absolute positioning though as it isn't needed.