29 Apr 2016

Bootstrap modal iOS momentum issue

Recently on one of the projects using

29 Apr 2016

Recently on one of the projects using Bootstrap 3 I encountered really weird bug – when the modal is opened, you can scroll the underlay.

In theory you have a backdrop over main body content, and only modal should be scrolled. No actions on page content itself.

In some cases it was not only aesthetic problem. My modal even stopped reacting on touch actions. The body was scrolled instead.

bootstrap-modal-issue

I have read tons of articles, and issue was using css property -webkit-overflow-scrolling: touch; on my Bootstrap modal.

If you don’t use this, you have really poor scrolling experience. The css rule applies so called infinite (or momentum) scrolling.

So, imagine you have this HTML:

Then, in your custom modal .less file add following lines:

Please, make sure that your modal has class .modal-open when it’s opened.

In my case, I had a modal with the height larger than mobile screen.

So, a pretty nice solution was to make modal full screen.

So that I have no scroll issues when I open modal – it should be always scrolled to top, and the page saved its scroll position when the modal is closed, I added few jQuery lines (as you are using Bootstrap jQuery is OK here):

Hope this will work for you!

Leave a comment
More Posts
Comments
Comment