CSS3转换后未在Android浏览器中突出显示的链接

Question

我有以下设置：

<div>Element with CSS3 animated height change</div>
<div><a href="#">Link</a></div>

我用CSS3转换为第一个元素的高度变化设置了动画，然后单击链接。在移动Safari中，如预期的那样，链接会以半透明覆盖突出显示。在Android浏览器（测试了2.1、2.2、2.3）中，链接是可以点击的，但不会出现突出显示。实际上，我通常可以点击并按住链接的旧位置，然后在那里点击高亮显示。

此处演示：http://jsfiddle.net/bnickel/DmMZN/

缺陷似乎是Android有一层与已知元素位置相对应的"触摸点"，但在CSS3动画后不会更新这些点。是否有任何安全的方法来确保触点正确更新？我可以执行webkitAnimationEnd回调。

Answer 1

解决方案非常简单。您只需要在动画结束时触发一个DOM更改事件。我使用以下内容，因为它足够通用，不会影响其他页面元素。

function fixTouchLayer() {
    $('<span/>')
        .css({
            position: 'absolute',
            visibility: 'hidden'
        })
        .appendTo(document.body)
        .remove();
}

http://jsfiddle.net/bnickel/DmMZN/5/