PhoneGap Page scroll up after Keyboard appearance in iOS devices that makes the PhoneGap page corrupted

Question

I am trying to develop a chatting application using PhoneGap for iOS devices. The application has a header that shows the logged user, a footer where user can write his text message, and a list view placed in the body which will display messages.

I updated to the latest version of JQueryMobile (1.3.0) but the issue still appearing inside the application. I have attached a snapshot shows how the layout becomes corrupted. (http://i.stack.imgur.com/RsLfT.png)

I tried several solutions like making the page not scrollable (set UIWebViewBounce to false) and not scalable (user-scalable=no) and other user interface changes, but the issue is not solved.

Does anyone have an idea how to fix this? (like a refresh after soft keyboard appearance)

---

Answer 1

In order to fix this Issue temporarily (because it shows breaks while keyboard is showing), you can set "KeyboardShrinksView" to "true" in your configuration file (config.xml) or add it:

<widget>
  ...
  <preference name="KeyboardShrinksView" value="true" />

  <plugins>...

Answer 2

For now you can add a:

document.body.scrollTop = 0;

whenever the input field recieves a blur event.

Answer 3

I was having the same issue using twitter bootstrap 3.

Adding:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Solved the problem for me.