Question

The Android Webkit browser (tested on 2.2, 2.3, and 3.0) seems to behave in weird ways when modal elements are put one above the other. In this example here

… I’m displaying a jQuery UI date picker with z-index 200, a gray overlay div spanning the whole document height and width with z-index 199 and behind all that is the regular form.

In the example above, I have clicked on the dropdown control for the year where it says 2011. Instead of selecting that dropdown, the focus went on the textarea element way below the gray overlay.

NOTE: This doesn’t happen with a desktop Firefox browser, or with the iPhone Webkit browser.

Any idea what’s wrong?? Or how to work around this issue? I want to avoid modifying the form (e.g. disabling all elements, while the overlay displays)…

Answer 1

It seems that this is actually a known issue in Android. It’s supposed to be fixed, but I can’t confirm that. In any case, starring this issue would be nice, thanks!

• http://code.google.com/p/android/issues/detail?id=6721
• http://code.google.com/p/android/issues/detail?id=26255