4

I have spent about 8 hours now try solve this issue, any help is appreciated!

How to reproduce:

  • Open a modal that's higher than the window height (in an iPhone)
  • Focus an input field
  • Press "done" in the iOS keyboard

You can no longer scroll to the bottom of the modal

jsbin: https://jsbin.com/hagiyojufu ( https://jsbin.com/hagiyojufu/1/edit?html,css,js,output )

martin
  • 324
  • 4
  • 14

3 Answers3

0

Add this css code:

html, body {
 overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
Arun Kumar M
  • 1,633
  • 1
  • 15
  • 26
0

Add this to .modal-open in bootstrap.css (overflow:hidden; - was already there in mine).

.modal-open {
  position: fixed;
  overflow: hidden;
  left:0;
  right:0;
}

This is a temporary solution that I am using. It makes the scroll work again, but when modal is closed the main page is scrolled back to the top. Better then before, but not a true solution. I got the solution from: @Eru Penkman - Bootstrap 3 modal with long form on iPhone doesn't scroll if you touch input field

He also added:

.modal{
  -webkit-overflow-scrolling: auto;
}

But that didn't fix the scroll back to top issue and made the scrolling glitchy, so I put it back too:

.modal{
  -webkit-overflow-scrolling: touch;
}

Hope this helps. Please let me know if you find a solution that fixes everything... :)

Community
  • 1
  • 1
cmac
  • 3,123
  • 6
  • 36
  • 49
0

Super old thread, but I just encountered this problem so here's my solution. I have all the elements referenced in javascript. When a user types in the input, a list of search results is populated. Adding these results, combined with the iOS behavior of moving things around when the keyboard opens results in the bug, where once the keyboard is gone the container holding the input and div for results can't scroll.

// results is a div holding the results. 
// As soon as the search returns and the results are 
// added (even before the keyboard is gone) i run the 
// code below and once the keyboard is gone things scroll 
// properly. It's basically a hack to get the browser to 
// recalculate positioning and rendering. class 'absolute'
// just sets the position to absolute from it's default 'relative'.

results.addClass('absolute');
// Force browser to assume there's upcoming rendering to do
results.element.clientHeight;
// remove class
results.removeClass('absolute');

It seems this works no matter which element its done on, the results container, or the parent, and it would probably work on other elements in that hierarchy too.

Henry
  • 491
  • 4
  • 13