search

twbs / ratchet

Build mobile apps with simple HTML, CSS, and JavaScript components.
http://goratchet.com
MIT License
14.63k stars 1.45k forks source link

Content "pushed up" after on-screen keyboard is displayed in iPad #609

Open matthewseng opened 10 years ago

matthewseng commented 10 years ago

To reproduce this problem:

  1. Navigate to http://goratchet.com/examples/app-movies/ using Safari on your iPad.
  2. Select "Add to Home Screen". img_0049
  3. Launch Movie-finder newly added to your home screen.
  4. Bring up the keyboard by selecting the search field. img_0050
  5. Bring down the keyboard.
  6. Content gets "pushed up". img_0051

Is there any work-around for this issue?

cvrebert commented 10 years ago

Possibly related to http://getbootstrap.com/getting-started/#support-fixed-position-keyboards

matthewseng commented 10 years ago

Just found out that this issue only happens if you use a split keyboard of iPad, normal keyboard works fine.

What's interesting is the scenario below:

  1. Tap on a field with a normal keyboard, change it to split keyboard (Pull the keyboard to the left and right simultaneously)
  2. Dismiss the keyboard.
  3. Note that there is no issue with content "pushed up".
  4. Proceed to tap on the field again with the now split keyboard.
  5. Dismiss the keyboard.
  6. Issue of content "pushed up" happens".
  7. Proceed to tap on the field again with the now split keyboard.
  8. Change it to normal keyboard (Push the keyboard towards the centre using your left and right fingers simultaneously)
  9. Dismiss the keyboard.
  10. Content no longer "pushed up" again.

Normal keyboard: img_0054 img_0056

Split keyboard: img_0057 img_0058

andreliem commented 10 years ago

I have had this bug when building as a PhoneGap iOS app as well. The keyboard shrinks the .content div and it doesn't come back to normal height after.

A hack that seems to be working is to use JS to force a scroll after the view has loaded. window.scrollTo(0,0);

This might only apply to iOS apps, I haven't tested outside of the native app environment.