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!

Jaideep Singh · Accepted Answer · 2012-10-14 00:22:50Z

3

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.

answered Oct 14, 2012 at 0:22

Jaideep Singh

1415 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mason81 · Accepted Answer · 2012-10-01 15:53:36Z

0

That is quite odd. Have you tried adjusting your css? It is possible to achieve the same desired layout but with a different approach.

Example:

for your labels:

remove -- position:absolute;
add -- display:inline-block;
change -- width:25%;

for your inputs:

change -- width:70%;

I setup something similar (static content) and it seems to be working for me.

answered Oct 1, 2012 at 15:53

mason81

1,7502 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

Android4-only stock browser strange behavior with input text

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related