15

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.

tjons
  • 4,749
  • 5
  • 28
  • 36
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • If the bug is known to happen only in the android browser and you have a solution for all other cases, can you set a click listener in the non-clickable element, read the User Agent and react properly? Maybe this doesn't make sense, but the User Agent thing could be useful – Maragues Nov 23 '12 at 12:25
  • 1
    @Maragues Interesting idea, but it won't work, because the element in the back that cathces the click event won't know about which element in front should have been clicked in the first place. – yunzen Nov 23 '12 at 13:02
  • if the element in the back is always placed in the same area, perhaps you could read the click coordinates and through some calculations considering the screen size and density, deduce if the clicks was for the front element. I know it's a crappy solution, but it may work as a desperate move. – Maragues Nov 23 '12 at 15:33
  • Where's my bounty? I was supposed to spend it, but it's gone :( – yunzen Dec 01 '12 at 15:17
  • Since you accepted my answer, was it of any value? I see no confirmation or bounty points that were set on the question. Hope you got it sorted. – zrooda Dec 01 '12 at 22:31
  • First: I think it's the way it could work, but I have to find a way to trigger the behavior on the opening and closing of the knighthood – yunzen Dec 02 '12 at 13:22
  • 1
    knighthood should mean lightbox. Bloody text replacement in my mobile – yunzen Dec 04 '12 at 09:45

3 Answers3

4

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.

alex
  • 479,566
  • 201
  • 878
  • 984
Joseph at SwiftOtter
  • 4,276
  • 5
  • 37
  • 55
  • I have a image map. Clicking on it triggers the lightbox. Lightbox is before the image map, but clicks go through the lightbox on the image map. This is buggy, wrong behaviour. And the other question. I use jQuery for the hover. The hovers work fine. It's android that doesn't work fine. – yunzen Jan 29 '12 at 22:48
  • You get the bounty as you are the only one concerned :( – yunzen Jan 30 '12 at 09:48
  • Would there be the possibility of using the `return false;` in the image map click's handler, or am I missing something? – Joseph at SwiftOtter Jan 30 '12 at 15:45
  • The Problem is, that the clickable elements behind gain focus at all. I have a form inside the lightbox an you are not able to click on the form's elements, because the click bleeds through to the elemnt behind. – yunzen Jan 31 '12 at 07:27
2

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;
}
zrooda
  • 3,610
  • 1
  • 30
  • 38
  • which element should have this rule? The one in the back which is clickable, but should not be, or the one in the front which is not clickable, but should be? – yunzen Nov 26 '12 at 15:13
  • This may work. I have no time now to test this further, but In Chrome's Element Inscpector I realized, that `pointer-events` must be cast to the `` element that has the image map to work. Couldn't try in android though – yunzen Nov 26 '12 at 15:32
  • I was thinking you would apply that to the input element behind that should not be clickable, but maybe I'm misunderstanding the problem you have. Let me know if it worked somehow. – zrooda Nov 27 '12 at 09:13
  • It is a imagemap area in the back that should not be clicked – yunzen Nov 27 '12 at 09:48
  • So it's an image map behind an abs positioned element that should not be interacted with. Do I take it that this didn't help then? – zrooda Nov 27 '12 at 10:29
  • Also, have you tried using it on the map element at all times? Not just on :focus or :hover. – zrooda Nov 27 '12 at 10:44
  • It may help, but I cannot approve it right now. Unfortunately I've got more important things to do. – yunzen Nov 27 '12 at 12:26
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.

Matteo Bononi 'peorthyr'
  • 2,170
  • 8
  • 46
  • 95