Input elements on android 4.x can not be styled when focused

Question

Update:

There is a fix:

-webkit-user-modify: read-write-plaintext-only;

Original question:

I am trying to boil this down to a simple example:

I have a simple input element like this:

<input class="myclass" type="text"/>

the style looking like:

.myclass, .myclass:focus {
   background-color: black;
}

this works fine on android 2.x and 3.x (except some devices that are known not to respect css on focused input elements)

Since I updated a nexus S to 4.0.3 I can`t get the input field to accept any styles.

Some testing revealed the following: The styles are actually applied, but for some reasons the browser renders a white rectangle over the input, rendering styles useless. Using Weinre i was able to move the "real" input element, so that I was able to display both.

Any suggestion on this are very much welcome.

Answer 1

The problem is related to the Nexus S and its poor performance with ICS / Android 4. The roar of problems with Phonegap, jQuery mobile, Sencha and on is deafening. From the ignoring of Viewport meta tags to mal-positioned z-order, The Chromium Android browser is just a massive problem.

1. Have you tried turning off openGL?

2. Have you tried separating the pseudo selectors?

It seems that Androids WebView is continually getting worse... which is odd as it "should" be improving. I'm having a ton of trouble myself with scrolling and flickering. A lot of frameworks are actually considering bailing on Android.

A link that may interest you: Problems with jQM and (mostly) Nexus S https://forum.jquery.com/topic/jquerymobile-1-0-does-not-support-android-4-0-ice-cream-sandwich

Hope this helps and you are not alone!

Answer 2

This is likely related to these two issues:

• http://code.google.com/p/android/issues/detail?id=24746
• http://code.google.com/p/android/issues/detail?id=24780