Does this happen with the "Live demo" modal on http://getbootstrap.com/javascript/#modals ?
If not, please post a live example (e.g. JS Bin) that demonstrates the problem.

The "Live demo" modal does not demonstrate the problem, and that may be because of the fairly simple markup contained in there. I would post a live example of the problem but mine is fairly complex and could make it hard to determine the issue, I will try and throw together a simpler example that demonstrates the issue and post it.

Closing until we hear more with a reduced live example. Just ping us here and we can re-open.

I've encountered this on the following page:
http://atlassolutions.com/ (the I'm interested link at the bottom of the page)

It pops open a modal with a contact form on it. It seems like the scrolling issue happens specifically after validation.

@vigilanteweb Could you please reduce that to a minimal JS Bin?

Here is a link to a JS Bin with the appropriate code in it. http://jsbin.com/riyejibaba/1/

Hi @vigilanteweb!

You appear to have posted a live example (http://jsbin.com/riyejibaba/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 38, column 124: Bad value navigation for attribute role on element ul.
• line 69, column 8: Stray end tag div.
• line 70, column 7: Stray end tag div.
• line 107, column 104: Bad value generator nofollow for attribute rel on element a: The string generator is not a registered keyword.
• line 201, column 46: Duplicate attribute id.
• line 294, column 22: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
• line 306, column 110: Attribute aria-required not allowed on element input at this point.
• line 312, column 110: Attribute aria-required not allowed on element input at this point.
• line 318, column 110: Attribute aria-required not allowed on element input at this point.
• line 336, column 28: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
• line 207, column 25: The for attribute of the label element must refer to a form control.
• line 294, column 22: The for attribute of the label element must refer to a form control.
• line 336, column 28: The for attribute of the label element must refer to a form control.
• line 352, column 40: The for attribute of the label element must refer to a form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@vigilanteweb Please further reduce the amount of irrelevant code in the Bin. Thanks!

Here it is. http://jsbin.com/yimugaxaho/1/

Hi @vigilanteweb!

You appear to have posted a live example (http://jsbin.com/yimugaxaho/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 108, column 46: Duplicate attribute id.
• line 201, column 22: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
• line 213, column 110: Attribute aria-required not allowed on element input at this point.
• line 219, column 110: Attribute aria-required not allowed on element input at this point.
• line 225, column 110: Attribute aria-required not allowed on element input at this point.
• line 243, column 28: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
• line 114, column 25: The for attribute of the label element must refer to a form control.
• line 201, column 22: The for attribute of the label element must refer to a form control.
• line 243, column 28: The for attribute of the label element must refer to a form control.
• line 259, column 40: The for attribute of the label element must refer to a form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@vigilanteweb -- does it happen with this fork http://jsbin.com/kiwela/1

Hi @carasmo!

You appear to have posted a live example (http://jsbin.com/kiwela/1/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 108, column 46: Duplicate attribute id.
• line 201, column 22: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
• line 213, column 110: Attribute aria-required not allowed on element input at this point.
• line 219, column 110: Attribute aria-required not allowed on element input at this point.
• line 225, column 110: Attribute aria-required not allowed on element input at this point.
• line 243, column 28: Bad value `for attribute` for `on element` label: An ID must not be the empty string.
• line 114, column 25: The for attribute of the label element must refer to a form control.
• line 201, column 22: The for attribute of the label element must refer to a form control.
• line 243, column 28: The for attribute of the label element must refer to a form control.
• line 259, column 40: The for attribute of the label element must refer to a form control.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@carasmo Yes it does. IT appears that there isn't any validation in that fork, but it does still have the scroll issue.

Hello, I'm new to this, but I am having a scrolling issue as well. On IOS8 with a simple modal with an image and content. Here is a working example. If you click on some of the longer images you'll notice the issue: http://designinspiration.com/

I can repro on http://getbootstrap.com/javascript/#modals with iOS 8.1.

i had the same issue after focusing on any input/textarea element in modal. try to remove '-webkit-overflow-scrolling: touch' property for '.modal'. it helped me to solve the problem.

+1 removing -webkit-overflow-scrolling: touch fixed the problem

Really excellent fix!

I haven't seen someone pointed out that you can't scroll pass the modal footer buttons, it's impossible to click it because bounces back when you scroll.
I think this only happens when the text/content of the modal is beyond the screen size. Only way to get out is to pinch to zoom out. I saw it on the Docs live demo.

I created a new version with the fix I simplified by removing the transitions.

The fix I've settled on is the position:fixed, width:100% on the modal-open class, plus using javascript to set the top css style on the body (so scroll position does not appear to change) and then scrolling to that "top" when the modal is closed.

This is what that looks like with the react modal I'm using. It appears to work pretty well.

  componentWillReceiveProps: function (nextProps) {
    if (this.isMounted()) {
      var st;
      var body = $("body");
      if (nextProps.open && !this.props.open) {
        st = $(window).scrollTop();
        body.addClass("modal-open").css("top", st * -1);
      } else if (!nextProps.open && this.props.open) {
        st = parseInt(body.css("top")) * -1;
        body.removeClass("modal-open").css("top", "");
        if (!isNaN(st)) {
          window.requestAnimationFrame(function () {
            $(window).scrollTop(st);
          });
        }
      }
    }
  },

I also had to make a change to force a repaint after the modal is displayed and disable animation in Safari because of a bug with a modal nested in a table cell not being drawn correctly..
https://raw.githubusercontent.com/moodysalem/react-backstrap/master/src/main/resources/META-INF/resources/rbs/components/layout/Modal.js

It is more than one year now and we do not have solution yet. Anyone maybe succeeded ?

I solved it. The problem is with the overflow and position. If you want that is going to work perfect in Safari (apple devices) you have to do next things:

.modal {
overflow: initial;
position: static;
}

So, in case if i forgot anything from there, I recommend to check if most of elements inside modal window are static.

I hope it is going to help you.

I have tried different solutions and ended up with removing the:
-webkit-overflow-scrolling: touch;
It even works with modal in modal.

Attention...if you use the following code then links in the modal to anchors (same page) doesnt work on some devices (iphone 4, ipad mini, ipad air):

@media only screen and (max-device-width:768px){

body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
}

body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}

body {
overflow-x: hidden;
overflow-y: scroll !important;
}

This worked for me:

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

Thanks @comapedrosa !!

The fix from @comapedrosa is working for me on iOS 9.x with the iPhone 6S.

I fixed this for UI Kit using the following CSS. Basically a combination of some of the fixes above.

@media only screen and (max-device-width:768px) {
.uk-modal-page body {
overflow: hidden;
position: fixed;
width:100%;
}
}
.uk-notouch.uk-modal-page body {
width:100%;
}
body {
overflow-x: hidden;
overflow-y: scroll !important;
width:100%;
padding:0;
margin:0;
}

This might work on Bootstrap too if you change some of the classes.

This issue seems to muddle together what might be multiple similar but separate underlying bugs, but anyway, filed a relevant WebKit/Safari bug: https://bugs.webkit.org/show_bug.cgi?id=153852

Also filed a separate bug for the "scrolling starting within a text field scrolls the <body> instead of the modal" problem, which I believe is what
@vigilanteweb referred to in #14839 (comment)
and @brycepj referred to in #14839 (comment)

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=153856

Worked for me @comapedrosa Thank you
.modal {
-webkit-overflow-scrolling: auto
}

I solved it (I hope!) with jquery. When the modal is "visible" I've settled the HTML and BODY height as the windows screen size and overflow: hidden:
$('body').height($(window).height()); $('html').height($(window).height()); $('body').css('overflow','hidden'); $('html').css('overflow','hidden');

@castiweb not working for me! issue still persists! and it also affects Sticky Footer on responsive websites.

@happy2deepak I think you're right! Maybe the best way is the css rule to subscibe bootstrap declaration:
.modal-open {
position: fixed;
}
In an other projet this solution works fine for me.

@castiweb yeah! Thanks. this works for me to an extent ! Though I will need to handle my Sticky Footer manually, but for time-being i can enter input values and scroll on the iOS devices

This fixed it for me on iPhone 4s and above

.modal
{
    -webkit-overflow-scrolling: auto !important;
    overflow-y: auto !important;
}