0

我有以下设置：

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

4

1 回答 1

0

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

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

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

于 2012-03-27T15:10:59.560 回答