Elements within a face of a 3d css cube cannot be selected. Strange

Question

I am building a 3d css cube menu. Code here.

<button id="btn">flip button</button>    
<div class="signup-viewport">
    <div id="cube" class="cube animation">
        <div class="front">front <a href="">front link</a></div>
        <div class="back">Back</div>
        <div class="left">Left</div>
        <div class="right">Right <a href="">right link</a></div>
        <div class="bottom">Bottom</div>
        <div class="top">Top</div>
    </div>
</div>

When the face is flipped by the 'flip button' button, the link from the right side of the cube cannot be clicked.

Any ideas why? In firefox the link works, but on chrome and chromium does not.

Answer 1

It's because your surfaces had a height of 0, causing the text to be rendered into padding area. Firefox and Chrome seem to treat such elements differently in terms of mouse events.

If you use height: auto, it works as expected, but you should take care that heights remain consistent with changing content.

Here's your modified JSFiddle demonstrating it.

Update:

Apparently, chrome behaves differently on different OS' (or versions).

However, the problem seems to be related to 3D nature of your transformations (transform-style: preserve-3D). When setting an explicit perspective, it works on my machine, though still a bit shaky.

Updated JSFiddle

You might also notice that everything looks a bit blurry now, since the 3D transforms "detach" content from the pixel grid by virtually lifting planes closer to the viewer.