Bootstrap 3 modal with long form on iPhone doesn't scroll if you touch input field

Question

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.

Answer 1

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;
}