Inconsistent behaviour with backface-visibility between browsers

Question

I was working with the rotate CSS3 transformation on my page when I noticed an inconsistency with the backface-visibility property when its value is "hidden". I have reproduced the problem in a JSFiddle.

HTML:

<div class="card">
    <div class="front">
        <button>Flip to the back face</button>
    </div>
    <div class="back">
        <button>Flip to the front face</button>
    </div>
</div>

This code should represent a card with the "front" div on the front face and the "back" div on the back face. I am using the backface-visibility property to avoid having the mirrored contents of the front face appear on the card when it is flipped.

If you open the fiddle in Firefox, you'll notice that clicking the "Flip" button will result in a mirrored "Flip" button on the right side of the page, despite setting the backface-visibility property to "hidden" for the front div. Clicking the "Flip" button (not the mirrored one) will flip the card to its original position and the mirrored "Flip" button will disappear.

If you open the fiddle in Chrome, clicking the "Flip" button does not create a mirrored "Flip" button, which is good. Unfortunately, the "Flip" button on the back side is no longer clickable.

In summary, the behaviour of the backface-visibility property is undesired in both browsers. How can I change my code so that mirrored content is not visible and things remain clickable in both browsers?

Update: Setting background for the "back" div to #FFF (or any color) makes it opaque, hiding the mirrored button from the "front" div when running the fiddle in Firefox. Problems with Chrome still remain.

Answer 1

For Firefox: Simply add backface-visibility: hidden; to class .card too.

See: http://jsfiddle.net/kah4g3ej/9/

For Crome: Seems as if the backside is not clickable in Crome. As Workaround put a DIV around as a clickCatcher and then dependent on .card.hasClass("flip") whether .addClass("flip") or .removeClass("flip").

See: http://jsfiddle.net/zb4L4ftm/3/

For me the first jsfiddle example here works with Firefox 31.0 in Windows 7 and Ubuntu.

This works for me with Firefox, Opera and IE 11: http://jsfiddle.net/zb4L4ftm/8/

But with Chrome the button click seems not realisable. So the second JSFiddle example is the only one I have gotten to run in Chrome.