11

I'm using Bootstrap 3 and I have a long form that users will need to scroll to get to all of the fields. What is happening is if you touch an input field to start your scroll it just locks up. This doesn't happen on android phones.

I can't give you a link to my exact code, but if you go here and click the first demo on iphone you'll see what's happening: http://jschr.github.io/bootstrap-modal/

I'm not sure if there's some way to give those input fields some sore of touch event that allows the scroll or what. Any input would be helpful.

Also, the iphone simulator in xcode shows the same thing.

creimers
  • 4,975
  • 4
  • 33
  • 55
Tomas
  • 3,054
  • 5
  • 27
  • 39
  • Did you ever end up finding a fix for this? I'm running into the same issue and just embarked on the search for a solution. – Derek Curtis Mar 10 '14 at 13:03
  • 1
    You are using bootstrap3 and bootstrap-modal using 2.3.2 you can delete bootstrap-modal no need for this now bootstrap 3 modal are fully responsive. You can try bootstrap 3 demo on your iphone – Imran Rashid Apr 10 '14 at 14:38

1 Answers1

10

I fixed a very similar issue where the occasionally on iPhone, the background scrolls rather than the modal. Try disabling webkit smooth scrolling on the modal, and disabling all scrolling on the body when a modal is open

body.modal-open {
    position: fixed;
    overflow: hidden;
    left:0;
    right:0;
}
.modal{
    -webkit-overflow-scrolling: auto;
}
actual_kangaroo
  • 5,971
  • 2
  • 31
  • 45