Ссылки не выделяются в браузере Android после перехода CSS3

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/