Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

Question

When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).

There are some workarounds described in some forums but none of them worked for me.

• I tried to put an <iframe> or an <a> between front and back
• I tried to change the DOM so maybe the browsers state is refreshed
• I tried to have the back elements be positioned as well None worked

I'm especially having problems with the image map's area elements.

Has anyone had the same issue and managed to work around it? I'm specifically interested in solutions which are tested against image maps.

Answer 1

Actually I've managed to avoid it by moving the objects below to let them be not visible. But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs. there are also some things that could help on some version/mobiles (but do not solve the problem)

• the above item has background:rgba(0,0,0,0.1);
• you should put a gif or png as background of the above element (as well as the background color as point 1)
• using thouchstart instead of click as bind event sometimes helps.

the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.

Answer 2

I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.

Just trying to think out loud. Sometimes another take on it can be helpful.

Answer 3

This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.

yourElementClass:focus, yourElementClass:hover {
    pointer-events: none;
}