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/

CSS3过渡后链接未在Android浏览器中突出显示

1 个答案: