Resolving the z-index problem in Android 2.x Browser

February 19, 2013 in CSS, JavaScript, mobile

One of the alarming issues of the Android 2.x Browser is that it does not respect the z-index of input elements, this issue is described here in details:
http://code.google.com/p/android/issues/detail?id=6721.

This issue can actually be very blocker to you if your mobile web application contains many openers that utilize the z-index CSS property in order to appear on the top of the active mobile view. This is because when the application’s opener is active and due to this bug, you can find the underlying mobile view input elements highlighted (focused) on the top of the opener as shown in the figure below.
BUG

In order to resolve this issue, I applied the following solution that works with me:
1. When a new opener is opened:
All of the *relevant* underlying input elements inside the view must be disabled. Doing this fix will disable the keyboard interaction with the underlying input elements and in the same time will not allow these input elements to be *focused*.

2. When the opener is closed:
All of the disabled input elements in the first step can be re-enabled again.

The solution looks complex, however, it can help if you have a similar situation.

Leave a reply

Your email address will not be published. Required fields are marked *

259,132 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by sweetCaptcha