Links not highlighting in Android browser after CSS3 transition

Question

I have the following setup:

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

I animate the height change of the first element with CSS3 transitions, then I click on the link. In mobile Safari, the link gets highlighted with a semitransparent overlay, as expected. In Android browser (tested 2.1, 2.2, 2.3), the link is clickable, but the highlighting doesn't occur. I can actually usually click and hold on the link's old location and get the tap highlight there.

Demo here: http://jsfiddle.net/bnickel/DmMZN/

The defect appears to be that Android has a layer of "touch points" corresponding to known element positions, but does not update those points after a CSS3 animation. Is there any safe way to ensure touch points get update correctly? I am fine with performing a webkitAnimationEnd callback.

Answer 1

The solution is simple enough. You just need to trigger a DOM change event at the end of the animation. I'm using the following as it is generic enough not to impact other page elements.

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

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