Android4-only stock browser strange behavior with input text

Question

Don't know if someone already saw this bug. Note that this only happens with Android 4.x stock browser. It has been tested successfully with Chrome on Android 4, stock browser on previous versions, iOS, Blackberry OS6 & 7, Playbook, ...

Look at http://www.hello-gurus.com/labs/sandbox/plain-form.html It works fine in the simulator (see http://cl.ly/image/1z3G1T2y2p2c) but goes totally wrong on the latest GalaxyTag (see http://cl.ly/image/1O123A3d0y3q)

Normal behavior should be text staying on the right. A padding on the left keeps the text to overlap with label. Input is 100% width so active zone is on the entire width. That's how it works on every other browser, where Android stock one aligns it on the left only when focus! Plus, it makes the disappear even if the input has a transparent background :S Even worse, sometimes its value get empty on blur x_X

This is getting me insane! Any solution or anything i may give a try?

Thanks a lot!

Answer 1

I'd encountered a similar problem where a ghost field would appear on the Android devices on focussing an input field. This CSS for input fields solved my problem:

input[type='text'] { -webkit-user-modify: read-write-plaintext-only; }

Might be worthwhile giving this a try.