Friday 28 October 2011

Dodgy double input fields on Android


It's a sunny day, everything is fine, you're enjoying yourself, the kids are at school happy bunnies and you get to work with a smiley face on. Then, 9:42am, one of your dedicated QA engineers comes to you saying: “Dude, I’ve got a weird one”.

He’s using an Android phone testing your nice handcrafted new HTML5/CSS3 app that usually plays ball. But today, it seems like the cheeky bugger has decided to ruin your day: when you click on a text field, you get an extra text field(?!!) displayed on the screen, some sort of 100px above. Plus, when you input some text in it, it seems like the text goes to the new one and not to the one you’ve initially created! When you click done, the text goes to the original text field but the whole process seems flawed… Well, you’ve created only one text field on your page and you’ve got 2 on the screen when you input text. What’s happening?!

Well, put it the way you want, that’s a genuine bug in the browser. Not all the Android versions are impacted and even some phones running the same versions of Android don’t have the same behaviour. All right, roll your sleeves and investigate.

In my case, it turned out that the problem was CSS transitions. I have a nice slide-in effect for my page content and it seems to go tits-up with controls. To fix it, I removed the slide in effect and Bang! It worked! No dodgy double input field on the screen. Great but this is not an acceptable workaround as I wanted to keep my nice slide-in effect.
So, I’ve investigated a bit more and it seemed like the browser state was not in sync with the display when using a transition. My code was simple: A div with an absolute positioning off screen and a bit of code, triggered by some event on the screen that sets a translate3D (-screenWidth) on the div. Just for argument sake I forced a translate3D(0,0,0) on the div class to force the browser to have some sort of reference point and… Bang! It worked!

I don’t know what’s happening behind the scene or if the issue is due to be fixed at some point but if you have this very issue, give a try to this and tell me if it helped!

9 comments:

  1. I couldn't get it to work. I still get the overlay but only in the password input field, and not on the text input field and am running out of ideas.

    ReplyDelete
  2. I tried this with my app, but it actually made the problem worse.

    Earlier I was only seeing this on Android 4.0 browsers, but never on earlier androids. So my solution was to switch contentEditable divs instead of inputs for platforms that support contentEditable. That solution was a much better experience. But for pre ICS androids you have to use the input fields. I haven't figured out how to counter this on those platforms.

    ReplyDelete
  3. i have the same problem.. it seems that the problem is in the margin-top and bottom. but who can develop without those? i dont have a good solution yet.. hope it will come soon

    ReplyDelete
  4. Awesome! Putting it in the container field didn't work for me, but applying it directly to the element worked well. It even got rid of an annoying bouncing effect that shows up when you type. THANKS!

    ReplyDelete
  5. first change your blog background for good readability

    ReplyDelete
  6. Just found this bug today on Android 2.3.5 (i will let you know if I found a fix) finger cross.

    ReplyDelete
  7. Thank you for the foot work. This lead me down the right path. I was having a similar issue with a 2.3.4 Bionic device. In my particular case I had to find the "acceptable" div element (I'm using a template system with a bloated UI framework so there wasn't just 1 div).

    ReplyDelete
  8. am also same problem am using type="number" text box overly plz help me send me the code to my mail id christopher.jul@gmail.com

    ReplyDelete
  9. hi frd input {
    -webkit-user-modify: read-write-plaintext-only;
    }
    coding working well scrolling not working

    ReplyDelete