CSS conversion unexpectedly reduced click area

Question

I have an unordered list with several list items that act like flip cards using CSS 3D transforms. I want them to flip clicks on links / anchor elements inside list elements, and these links also fill the entire list element.

The list items look and act normally in the default state, but as soon as I click one and it flips over, the clickable zone on the back is only in the upper half of the list item. When I check in Chrome, the link area still fills the entire height of the list item, so I'm not sure what is going on.

Fiddle: http://jsfiddle.net/chucknelson/B8aaR/

The following is a brief description of the transformation properties that I use for various elements (see the script for details):

-webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 100% 1.5em; -webkit-transform: rotateX(180deg); 

Note that I'm testing on Chrome 28 on Windows, and I just use the -webkit prefix in the script. I also apologize for any messy CSS or markup, this issue made me repeat a bit. Any help in understanding what is happening is much appreciated!

Update 8/11/2013:
I had the same problem with two-dimensional transformations in list items (just flipping an item, without front / back). Adding the conversion @thirtydot translateZ (1px) to CSS for the <a> tag is also fixed. So it seems like the problem is with the z axis ... but only in part of the link. Maybe this is a bug in browsers?

Answer 1

This problem may be the result of a webkit rendering error, but the solution was to cast the Z axis link to 1px - this seemed to push the link level and was completely clickable.

To fix the three-dimensional conversion (via the script from @thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/ ), you had to specify javascript:

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

When using the 2D transform, adding translateZ to 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 */ }