How to handle mouseover properly on a flipped div?

Question

I'm trying to make a flippable div which flips on mouse click. I got it to work on Firefox 39 and Chrome 43. The markup is as follows :

    <div class="flip-wrapper flippable-wrapper" id="fliptest-01">
        <div class="flip-wrapper flippable">
            <div class="front-outer flippable-front">
                <div class="front-inner"></div>
            </div>
            <div class="back-outer flippable-back">
                <div class="back-inner"></div>
            </div>
        </div>
    </div>

The CSS goes like this:

.flippable-wrapper{
  position:relative;
  perspective:800px;
}

.flippable{
  transition: transform 0.5s ease 0.1s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.flipped{
  transform:rotateX(180deg);
}

.flippable-front{
  backface-visibility: hidden;
}

.flippable-back{
  transform:rotateX(180deg);
  backface-visibility: hidden;

}

The .flipped CSS class is dynamically toggled on the .flippable div by a javascript onclick event handler.

The problem is with the mouseover event. On Chrome, when the div is flipped (back face displayed), the outermost div (with id="fliptest-01") appears to be on top of its children, preventing them to receive mouseover event. How can I fix that? Firefox doesn't have this problem, the mouseover event is dispatched correctly to children on both front and back sides.

Here is a codepen with the whole thing : http://codepen.io/anon/pen/VLBzRZ

Answer 1

Just remove the backface-visibility: hidden; from .flippable