Clickable link area unexpectedly smaller after CSS transform

Question

I have an unordered list with a few list items that act as flip cards using CSS 3D transforms. I want them to flip via clicks on links/anchor elements inside of the list ite

Answer 1

This problem may be the result of a webkit rendering bug, but the solution was to tranlsate the link's Z-axis by 1px - this seemed to push the link layer up and have it fully clickable.

To fix the 3D transform (via the fiddle from @thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/), some javascript was required:

    setTimeout(function() {
        flipTarget.find('div.back a').css('-webkit-transform', 'translateZ(1px)');
        flipTarget.find('div.back a').css('transform', 'translateZ(1px)');
    }, 600);

When using a 2D transform, adding translateZ in the CSS class worked:

.flipped {
    border-top: 1px solid black;
    background-color: #555;

    -webkit-transform: rotateX(180deg);
}

.flipped a {
    color: #eee;
    text-decoration: line-through;

    -webkit-transform: scaleY(-1) translateZ(1px); /* the fix */
}