Input Box screen warping while typing (VIDEO)

[tommedema]

I created a short video describing and documenting this issue:
http://www.youtube.com/watch?v=snfLlSg0QaA

If you find this kind of issue reporting useful or not, please tell me.

LOG: https://gist.github.com/1281364

HTML: https://gist.github.com/1281359

jQuery Mobile version: 1.0rc1

I'm no native speaker, so be warned about an accent you might consider weird.

[toddparker]

Thanks for the details. Could you post this as a jsbin or jsfiddle test page and supply written info on the platform, version and steps to reproduce in addition to the video? Is this just a problem within PhoneGap or can it be seen in the browser too?

[tommedema]

@toddparker, it cannot be seen in the browser. I suspect it is related to Android's keyboard popping up, doing something with the screen height (notice the debug spam).

I don't think I can create a jsfiddle, since it does not appear in a browser on the PC.

[toddparker]

Hmmm, that makes this a lot harder to debug...if you track down an specific clues as to what is causing the problem and a potential workaround, please chime in here.

[tommedema]

@toddparker, I created a jsfiddle at http://jsfiddle.net/3KPa2/

When browsing there on my Android, this issue does not seem to appear.

It may be related to PhoneGap. I'm not sure whether it is just PhoneGap though, or the combination of PhoneGap and jQuery mobile.

Update: when running this fiddle together with Ripple (PhoneGap emulator) in the browser, the issue does not appear. I suspect this is because it runs with a normal PC keyboard: thus the on-screen virtual keyboard does not need to appear.

This makes me believe even more this is related to the virtual keyboard and resulting screen height changes. Then again, it does not appear in the jsfiddle with a virtual keyboard.

This may be caused by PhoneGap, which is awkward, since all it does is create a browser instance.

What do you think?

[tommedema]

@toddparker,

I resolved this issue by removing an anti-flicker flag from my CSS file:

.ui-page {
    -webkit-backface-visibility: hidden;
}

To clarify, this should be removed, not added.

Unfortunately, this re-introduces the flicker problem.

[toddparker]

That is the tradeoff. The backface visibility trick is great because it improves rendering, but can cause memory issues, among other things.

[tommedema]

Right, it appears that these issues resulting, such as this one, are
unacceptable, though.

I noticed that the css trick was added to the latest build? After updating,
this issue is back again.

Finally, I believe you can resolve the rendering issues by using only 2
webviews, as explained above.

[tommedema]

I have re-opened this issue because it came back in the latest version on github. I'm not sure what has changed, but probably something to do with the CSS.

[tommedema]

@toddparker, anything I can do to make this ticket increase in priority? Not being able to type text into input boxes when using lists on Android browsers seems like a serious problem to me. We've already pinned down the problem to certain webkit CSS items (not just backface-visibility, also transforms etc.).

The problem does not appear in the latest stable release but does appear in the nightly build.

[toddparker]

It's a tricky issue because it seems to be an odd behavior of the keyboard in an app only? Could you hide the footer on input focus to see if that improves the situation? The footer looks like it's being pushed up by the keyboard, but it's inline, not fixed position - right?

[toddparker]

I'd also like you to try removing phonegap.js to see if that could be causing the issue. Could you also try programmatically removing the css transform rul (overriding it) when you focus on an input or even just after this page is rendered?

Just trying to get to a root cause an possible workaround. This may be a case where we need to document some potential workarounds for this specific case since it's not going to make sense to give everyone a blinky experience to fix a bug in PhoneGap apps running on Android.

[tommedema]

@toddparker

• removing footer and header does not influence the issue (they were also inline)
• I cannot run the app in a WebView without phonegap.js, but when running it in the normal browser without phonegap, the issue does not appear
• I would say it is more likely that it is not phonegap that causes it, but rather how Android renders webviews inside native applications.
• Reverting nightly build CSS to stable build CSS solves the issue
• I am still trying to pin down which CSS rules cause the issue.. it is not just backface-visibility, unfortunately.
• All these CSS rules that cause it seem to be set to transition styles