Clickable link area unexpectedly smaller after CSS transform

问题

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 items, and these links fill up the entire list item as well.

The list items look and act fine in their default non-flipped state, but once I click one and it flips, the clickable link area on the back side of it is only on the top half of the list item. When I inspect in Chrome, the link area is still filling up the entire height of the list item, so I'm not sure what is going on.

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

Below is a summary of the transform properties I'm using on various elements (see fiddle for detail):

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

Note that I'm testing in Chrome 28 on Windows, and I'm just using -webkit prefix items in the fiddle. I also apologize for any messy CSS or markup, this problem had me iterating a bit. Any help in understanding what is happening is greatly appreciated!

Update 8/11/2013:
I was having this same problem with a 2D transforms on list items (just flipping the item, no front/back). Adding @thirtydot's translateZ(1px) transform in the CSS for the <a> tag fixed that one too. So it looks like the issue is related to the z-axis...but only on part of the link. Maybe this is a bug in browsers?

回答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 */
}

来源：https://stackoverflow.com/questions/18167981/clickable-link-area-unexpectedly-smaller-after-css-transform

标签

html

css

transform