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!