Android 4 ICS Ice Cream Sandwich - iframe that contains a form

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!

Montague

Looks like a 4.0 specific issue only (and only some devices) with no workarounds: code.google.com/p/android/issues/detail?id=30964 – Malodorous

This issue has just cost us most of the morning and part of the afternoon. I'm glad it's not just us. :-) – Zannini

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.

Gromme

This isn't the best workaround, some keyboards will send characters that don't comply with this restriction. – Zacheryzack

@WesJohnson is there a better fix? Please share with us if you have one. – Gromme

Wish I knew, haven't found one. Just pointing out that this fix doesn't resolve the issue on my device (Android 4.0.4 with a Swype keyboard is unable to type most letters with this restriction). – Zacheryzack

@Gromme This worked in my sample when I added your CSS to the iFrame HTML. Thanks – Montague