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

【问题标题】：Links not highlighting in Android browser after CSS3 transitionCSS3 转换后，链接在 Android 浏览器中未突出显示
【发布时间】：2012-03-23 23:32:23
【问题描述】：

我有以下设置：

<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 回调。

【问题讨论】：

标签： css css-transitions android-browser mobile-webkit

【解决方案1】：

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

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

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

【讨论】：