Android + Sencha Touch text input duplicated and difficult to un-focus

Question

I have an Android app using PhoneGap 1.6 and Sencha Touch 1.1.1. One view has a text input field which behaves oddly in Android: it duplicates itself and it is very difficult to remove focus.

I have determined that it is a WebTextView coming up over top of the "real" input field. The problem I am having with this is that blurring the text field with screen taps is extremely difficult, and if you scroll the parent container, the WebTextView does not scroll with it, so you can see both at the same time.

The only way to remove focus on the element is to tap furiously all over parts of the screen, much like triggering the frustration detector from Mavis Beacon.

My actual question is: how can I turn off this functionality completely, or at least work around it? It is not reasonable to expect the user to do anything other than single-tap outside of the box, or press the Back button on the device to stop input in the text field. As it is, pressing Back simply stows the soft keyboard and does not give up focus.

Answer 1

These are browser bugs, triggered by some CSS-flags.

To explain the bug: The device creates some kind of "screenshot" from the web-sites content. All transformations and transitions are made on top of the "screenshots" from the actual page.

If you have input elements, there will be some kind of proxy elements rendered on top of the "screenshot". Sometimes the are these proxy-elements at the wrong position.

This happens, if you trigger the website to be hardware-accelerted. You have to drop some CSS-definitions:

transform(), translate(), transform3d(), translate3d().

The Bad news are: You cannot solve this problem, because it a bug within the browser.

I have some different android devices, all have different problems, one fix will break another device.

I think the bug will never be solved, because noone cares about the embedded browser since android 4.1 and the chrome.

If you can disble hardware accelertion, this may help.

The good news are: There are rumors about an embeddable chrome-webview.

I started to write some blogposts about "the new IE": http://christian-kuetbach.de/blog/post/14