Android: -webkit-tap-highlight-color highlight issue for overlays

[bradfrost]

trafficstars

Summary

Tap highlight color (the browser's way of indicating a click with a semi-transparent colored background and/or colorized border) improperly highlights a clickable region sitting underneath an overlay (lightboxes, menus, etc).

Platforms

Android

How to Reproduce

Stack a clickable element on top of another (preferably large) clickable region. Click on the topmost link and you should see the tap highlight color take the shape of the underlying clickable region.

Reduced Example

I'll see what I can do.

Bug Tracker ticket(s)

Workarounds

Add -webkit-tap-highlight-color: rgba(0,0,0,0) to links to disable the tap highlight color from the desired elements. Be mindful that tap feedback is an important aspect of the user experience, so you might only want to conditionally disable tap highlight color.

[ptolp]

This is probably the same issue: http://code.google.com/p/android/issues/detail?id=6721

Google claims they have fixed it, but can still be reproduced on my Android 4.0 device.

[ptolp]

Note from the Android bug report the proposed workaround to disable all underlying interactive elements temporarily with JavaScript, which is often usability wise better than hiding tap highlights.