Links not highlighting in Android browser after CSS3 transition
-
26-05-2021 - |
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.
La solution
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();
}