1

I am developing a mobile web app, and I'm a bit confuse with something : I have one div called UpperDiv with a z-index of 50 and under that div, there is an other one, called UnderDiv with z-index 0. The problem is, when I "tap" on UpperDiv, it activates the :active pseudo-class on an element (where I clicked) of my UnderDiv. What should I do to disable this ?

----------------------------- EDITED --------------------------------

It finally works !!!!

I forgot to mention that I'm using a transition to open/close my UpperDiv. So when opening I'm using :

$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){
  $('.underDiv').css('pointer-events', 'none');
});

And when I close :

$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){
  $('.underDiv').css('pointer-events', 'auto');
});

It works fine for me, if it can help someone else...

user2436506
  • 11
  • 3

1 Answers1

0

If this is on Android, it will be similar to this question

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

It is a bug in Android browser (and only there) that comes around when you change the DOM of the page along with some z-index stacking. The layers below will be target for mouse clicks even if something is stacked on top of it.

There are some workarounds on the above question which might work for you.

I read about using an empty flash movie with z-index 20 between the two divs.

Here's another question, which might have the answer Android Webkit: Absolutely positioned elements don't respect z-index

on the issue page at google there is a workaround by some developer. https://code.google.com/p/android/issues/detail?id=6721#c26

The problem is: If you change the CSS of an HTML element (e.g. display), the Android browser does not keep track of the UI changes the same way it would do it, if the DOM was changed. The change and the UI active areas are not synchronised correctly by only changing CSS. They would be by changing DOM.

So if you display the hight z-index layer with changes in the CSS, do change the DOM of that layer accordingly. This includes some gibberish in some data- attributes.

Comment https://code.google.com/p/android/issues/detail?id=6721#c55 may have a solutions, too

Community
  • 1
  • 1
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • Thx for your answer! I tried using the `pointer-events: none` on the element which shouldn't be clicked, but it doesn't work :( – user2436506 Sep 23 '13 at 09:55
  • Thanks again. I've tried many of the solutions proposed in the issue page, but it's still the same... That's too bad that the Android team hasn't fixed the issue yet – user2436506 Sep 23 '13 at 12:54