13

So I've built a nice, shiny HTML5 application that is targeted at mobile Safari, and Android's default browser. The Android versions I'm testing it on are 2.1 and 2.2.

My app has a textarea on one of its pages, and this textarea tends to have a good amount of text in it at times. Its basically a free-form writing field.

This works as expected in iOS. However on Android, as you type, the screen scrolls wildly up and down on every keystroke, often you can't see what it is you're typing as you type, and you get dizzy from all the jumping around. Furthermore, if the content within the textarea exceeds its height, it appears to be impossible to scroll within it.

Don't even get me started on landscape mode. The above issues are even more pronounced there.

This feels like a bug with Android as there really isn't anything fancy about my textarea. I've stripped it down to the bare essentials, and it behaves the same.

Wondering if anyone else has had this much fun with their textareas on Android, and could maybe give some advice, or at least empathize?

It seems that Google has managed to mostly solve this in the Gmail web interface for Android. I'm guessing there's some JS magic going on because my markup/CSS is identical.

Mikel
  • 486
  • 5
  • 13

4 Answers4

9

SOLUTION: The 3D webkit is broken in Android, this is causing this problem. Make sure you are not using -webkit-transform: translate3d(0, 0, 0); or -webkit-backface-visibility: hidden; on anything related to the inputs. :(

Alex Grande
  • 7,929
  • 1
  • 26
  • 30
  • solution worked for me. was smashing my head against the desk for hours after my textarea suddenly stopped working b/c I had added a translate3d(0,0,0) to my container div. Thanks! – istan Jul 03 '11 at 01:28
4

If at all possible, you can lockdown the scrolling of the screen while the user is typing by setting the overflow property of body to 'hidden' - you can selectively enable/disable it on focus/blur events. Of course this does mean that your user will not be able to scroll while typing

Mike
  • 41
  • 2
  • Thanks for the suggestion! In my case, the input field was in a position: fixed div that covered the underlying page. Whenever the field gained focus (from a tap) the covered page scrolled wildly as the Android soft keyboard repeatedly appeared and disappeared. Setting overflow: hidden on the body when showing the overlay seems to prevent the crazy behavior. I'll just have to save the page scroll position beforehand and restore it afterward. – ʇsәɹoɈ May 10 '12 at 18:27
1

There is no magic answer. Android keyboard input interactions with web forms is simply horrendous. You have to thread the needle very carefully to make it work properly, and keyboard behavior is not the same across Android versions. But it is possible with a LOT of work (see our Sencha Touch framework for what's possible today - the other mobile web frameworks are tackling the exact same problems too).

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • The strange thing is that I want to have just basic textarea functionality, like scrolling, typing, and moving around the cursor. I can do those things on Gmail more or less, but on my own page, not. Seems like there's something specifically getting in the way of it. Maybe its the jQTouch library I'm using. – Mikel Dec 21 '10 at 16:29
0

I experience this behavior on nearly every page. Here on StackOverflow, on a wordpress blog and many more.

I can only image that this is a usability bug/issue in the android browser and this is why I prefer native UI/application :)

WarrenFaith
  • 57,492
  • 25
  • 134
  • 150