2

I have an odd issue on iOS devices.

When a Bootstrap modal is open, I want to be able to scroll the modal to see its content; but instead of scrolling the modal, the browser is moving up and down or the website cuts off from the browser.

The only reason I guess should be position: fixed on the body and overlay (modal-open and modal classes). I don't provide code as it's the default Bootstrap modal. Please see images (the issue is highlighted in red) to see what I want to describe. Can someone advise?

enter image description here

enter image description here

Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
FrontDev
  • 837
  • 5
  • 19
  • If its not the modal, then its possible that something is taking away the focus. This happen to me once with a slider on the home page, everytime the slide changed it killed the modal scroll functionality. are you using a slider? or something that would remove the focus once modal is open? Sorry, not an answer but i cannot comment (rep) but would like to help. – JoeyG Mar 04 '16 at 23:32
  • Thanks a lot, at least somebody trying to help... nope in this page there is no slider, only html modal and colorbox popup... in project was used bootstrap 3.3.1, I have updated js to 3.3.6 (only js not css, don't know if I'm allowed to use different versions for css and js but I can't change styles). After this scroll is normal a bit, but for now only the second issue is remaining when scrolling to Down (bug in 2nd image).So when scrolling on ios chrome, popup gets small height, and then becoming normal after some scroll. Sorry for large comment :D can't describe otherwise. – FrontDev Mar 05 '16 at 15:49
  • can you advise, how you solved the problem? – FrontDev Mar 05 '16 at 16:16
  • did you ever solve this i am having the same problem – Timmy Von Heiss Aug 05 '16 at 17:07
  • 1
    @TimmyVonHeiss, yes I could manage with this, the main thing is that I upgraded bootstrap to latest version, where already were solved lots of modal problems, did everything like bootstrap and also added `.modal, html, body {-webkit-overflow-scrolling: touch;}` . Also I suspected about mobile bottom toolbar, but I didn't reach to that part as it's solved. If bootstrap dont help you, you can check that too. Please let me know if you could solve. – FrontDev Aug 07 '16 at 13:52
  • my problem was i was using the ruby on rails gem which is the old version 2.1 of masonry. got it now. – Timmy Von Heiss Aug 07 '16 at 14:19
  • Possible duplicate of [How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?](https://stackoverflow.com/questions/19060301/how-to-prevent-background-scrolling-when-bootstrap-3-modal-open-on-mobile-browse) – Mugur 'Bud' Chirica Aug 14 '17 at 14:21
  • I think that you solved this, but for future users have a look at my answer in here: https://stackoverflow.com/a/45676644/3757435 – Mugur 'Bud' Chirica Aug 14 '17 at 14:22

0 Answers0