Inconsistent behavior with reverse visibility between browsers

Question

I worked with CSS3 rotary transforms on my page when I noticed a mismatch with the backface-visibility property when its value is "hidden". I reproduced the problem in 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 map with a “front” div on the front and a “back” on the back. I use the backface-visibility property so that during mirroring the map does not display the mirror contents of the front surface.

If you open the script in Firefox, you will notice that clicking the “Flip” button will lead to the mirror “Flip” button on the right side of the page, although the backface-visibility property is “hidden” for the front div. Pressing the Flip button (not a mirror) will flip the map to its original position, and the flip Mirror 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 is no longer available.

Thus, the behavior of the backface-visibility property is undesirable in both browsers. How can I change my code so that the mirrored content is not visible and everything remains clickable in both browsers?

Update: setting background for the "back" div to #FFF (or any color) makes it opaque, hiding the mirror button from the "front" div when running the script in Firefox. Chrome issues still remain.

Answer 1

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

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

For Crome: It seems that the flip side is not available in Crome. As a workaround, put a DIV as clickCatcher, and then depending on .card.hasClass("flip") on .addClass("flip") or .removeClass("flip") .

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

For me, the first jsfiddle example works with Firefox 31.0 on Windows 7 and Ubuntu.

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

But with Chrome, clicking a button seems unrealizable. So, the second JSFiddle example is the only one I got in Chrome.