Android ICS Webview textarea typing slow

Question

I'm developing an Android hybrid app using Cordova 2.9, and jQM 1.1.0.

In one place the user can add notes in a Textarea, and the speed is fine on the following Android versions:

GB 2.3.x
JB 4.1
Nexus4 4.2, 4.3
Nexus7 4.3
Intel Emulator w/4.3

On ICS, 4.0.3, on both a Samsung GS3 and an Amazon Kindle HD 8.9" (and Intel Emulator w/4.0.3), the typing is very slow to respond. I type the word "test", by the time I'm done tapping the word, it'll be another 2 seconds before the entire word shows up.

When I open the HTML using either default Android browser or Android Chrome on ICS keyboard speed is fine.

input[type=text]/input[type=number] both behave the same way.

What I've found helps:

- reboot device
 - disable Android spellcheck (Settings-Language/Keyboard-KeyboardSettings-spellcheck)
 - CSS to fix double-input issue, and disable keyboard spellcheck and word prediction
textarea {
-webkit-user-modify: read-write-plaintext-only;
}

Tried converting to editable div, and that didn't seem to help.

My next step is instrumenting the Cordova library to try and find a bottle neck there, but I'm hoping to find a different fix before investing the time into that.

Answer 1

I found a solution to the very slow typing on ICS Webview.

I had already disabled some of the expensive CSS features, like box-shadow, text-shadow, border-radius, and all those helped.

The big change that transformed the typing speed was removing all background-image: gradient css rules.

Found a reference to this from Kerri Shotts over on the Phonegap google group https://groups.google.com/forum/#!searchin/phonegap/slow/phonegap/JNTlZpSZod8/nLvsH2noum4J

Since the CPU is going to be doing all the compositing, you need to lighten the load as much as possible on it: transparency is going to be a huge deal here -- namely, getting rid of it. Horrible, I know, but if the CPU has to alpha-blend any content together, it's going to take its time doing it, and the result is a slow app. Get rid of box shadows, text shadows, pretty CSS gradients, etc. If you must have those, build those like we used to before we had transparent PNGs -- image slices (ugh). Sickening, yes, but you unless you're willing to deal with the slower app, this is the only thing I know of to do. Furthermore, reduce image sizes as much as possible, don't require image scaling, and reduce your HTML elements by as much as possible.