Question

Android 4 duplicates inputs when the user focuses them. This duplicate input sits on top of the real input, and it functions pretty normal. This is odd, but ok, it seems to work.

However, if those inputs reside within an iframe, the duplicated input is no longer rendered on top of the original input, and instead it’s rendered in a different spot.

Screenshot (duplicated input contains blue border, top left corner):

As far as I can tell, it’s actually rendering this duplicated input as if the parent HTML document didn’t exist at all. For example, If you add some margin-top inside of your iframe, the duplicate input takes that into account.

I’ve created a live example for your debugging enjoyment:

http://ghettocooler.net/stuff/code/android-ics-iframe/

Any ideas? Thanks!

Answer 1

Just spent a few hours on this. The thread above by davethegr8 now has the solution. All’s needed to fix the problem I had was:

input {
    -webkit-user-modify: read-write-plaintext-only;
}

Tested this on a HTC One X default browser and it worked fine.