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

我有以下设置：

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

具有CSS3动画高度更改的

元素

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

此处演示：

---

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

webkitAnimationEnd

回调。

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

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

函数fixTouchLayer（）{
$('')
.css({
位置：'绝对'，
可见性：“隐藏”
})
.appendTo（document.body）
.remove（）；
}