CSS变换后可点击的链接区域意外地小 [英] Clickable link area unexpectedly smaller after CSS transform

问题描述

我有一个无序列表，有几个列表项，它们使用CSS 3D变换作为翻转卡。我想让他们通过点击列表项中的链接/锚点元素，这些链接也填满整个列表项。

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.

列表项目看起来和在它们的默认非翻转状态中行为良好，但是一旦我点击一个并且它翻转，它的背面上的可点击链接区域仅在列表项的上半部分。当我在Chrome中检查时，链接区域仍然填满列表项的整个高度，因此我不知道发生了什么。

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.

小提琴： a href =http://jsfiddle.net/chucknelson/B8aaR/ =nofollow> http://jsfiddle.net/chucknelson/B8aaR/

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

下面是我在各种元素上使用的转换属性的摘要（详见fiddle）：

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);

注意，我在Windows上的Chrome 28中测试，我只是使用-webkit前缀项目在小提琴。我也为任何凌乱的CSS或标记道歉，这个问题有我迭代一点。

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!

更新8/11/2013：

我是具有这个与列表项目（仅翻转项目，没有前/后）的2D变换相同的问题。在CSS中为< a> 标签添加@ thirtydot的translateZ（1px）变换，修复了一个。所以它看起来像问题是与z轴相关...但只有部分链接。也许这是浏览器中的错误？

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?

推荐答案

这个问题可能是webkit渲染错误的结果，将链接的Z轴翻转1px - 这似乎将链接层向上推，并使其完全可点击。

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.

修复3D变换（通过@thirtydot http://jsfiddle.net/thirtydot/YCGjZ/7/ ），需要某些JavaScript：

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);

使用2D变换时，在CSS类中添加translateZ可以工作：

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

这篇关于CSS变换后可点击的链接区域意外地小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！