Backface visibility disabling form controls

Question

I've been working on a project where I have to develop a web page that looks like this
http://cdpn.io/jkCqI
Though it works fine with FireFox, the only issue that I am facing is that the form controls for this webpage do not work in Google Chrome. I suspect it is an issue of

   backface-visibility

or anything like that.
Can anyone please help me with this? How to correct this?

Answer 1

It's a common problem in Chrome, and the equivalent of z-index positioning in 3D, the z transform.

Try

.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg) translateZ(1px);  // added translateZ 
}

and it will work