Modal Scrolls Background Content

[ryanmcdonough]

On http://twitter.github.com/bootstrap/javascript.html#modals when you launch the demo modal the background content scrolls to the top of the transitions section.

[mdo]

It doesn't scroll up to the transitions section for me, but it does move up to the demo modal. Will need @fat to take a look.

[Substr]

This is also happening to me on my own implementation of a modal popup so it's not specific to the demo page.

[JamesHarker]

I had the same problem and found this easy fix

[Substr]

@JamesHarker Unfortunately that doesn't seem to resolve this problem, it only prevents the user manually scrolling the page behind the modal.

[skbailey]

I have the same issue. Launching the modal programmatically [ $('#myModal').show() ] causes the background to shift upward. But when I close the modal the background doesn't return to its original position. This is on my own site, not the demo. On the demo, the background shifts upward but then returns to its original position.

[Substr]

@koenpunt Due to the nature of the bug I don't think it would be suitable (or even reproducible at all) on jsfiddle due to the layout of their pages (i.e. no scrolling). Is the link provided in the OP not a suitable example in this case, as it's reproducible in the official demo pages?

[koenpunt]

My bad, did run make haunt to see what it does and at first it showed me nothing, but now I see; it commented on all the issues..

[mfansler]

I ran into this issue in a StackOverflow question today, and did a bit of debugging on it.

First, let's follow the standard submission guidelines by adding a JSFiddle.

Recreate

1. Open JSFiddle.
2. Scroll down to buttons.
3. Click the "Modal via Data API" button.
4. Notice that background page scrolls up slightly as modal pops up.
5. Close the modal.
6. Notice that the page scrolls back down (sometimes not always to the same place).
7. Click the "Modal via JS API" button.
8. Notice that background page scrolls up slightly, etc.
9. Close modal.

Result: Page does not scroll back down to the button.

Expected Result: Page scrolls down after closing modal.

Ideal Behavior: There shouldn't be any scrolling to begin with.

Details:

• I'm only seeing this in Chrome
• Must include bootstrap-transitions.js

Analysis

Chrome isn't playing nice with the fact that the Modal plugin sets the focus to the modal prior to completing the CSS3 transitions. This causes the Chrome browser to scroll the page.

The reason why there is a noticeable difference in behavior between using the Data API and the JS API is that the former refocuses on the triggering button once the modal is hidden, causing the page to scroll back down (though not always to the same position).

Possible Fix

One possible fix is to simply reorder the call to the focus() method to ensure that it occurs after the transition has completed. Removing it from Line #73 and moving it to immediately before the that.$element.trigger('shown') on Line #78 and #79 would correct it.

So 77-79 become:

transition ?
        that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) :
        that.$element.focus().trigger('shown')

See JSFiddle

I'll likely be sending over a pull request once I write up some unit tests, unless someone beats me to it.

[OndeVai]

Any word on this? I'm still facing the same issue

[ilijir]

The problem is back with jquery-1.9.0.

[n1vlac]

I am seeing this as well with jQuery-1.9.1

[arm4b]

The same issue.

[cvrebert]

@n1vlac, @armab, @elijahyang: What browser & OS? I can't seem to repro on the docs page (which uses jQuery 1.9.1) with Chrome on Mac.

[n1vlac]

Chrome on Mac as well. I'm gonna need to dig a little deeper, I'm seeing it inconsistently in my application - sometimes it scrolls to the top and sometimes it doesn't. I'm displaying my modals by calling .modal("show").

[mfansler]

Here is an updated JSFiddle test using jQuery 1.9.1 and Bootstrap 2.3.0.

JSFiddle

I'm not seeing any issues with Chrome or FF (Windows). IE <= 9 doesn't matter - no transitions.

@n1vlac @armab @elijahyang Can you say whether you experience the issue on the JSFiddle?

[n1vlac]

It's working just fine for me now. On my own app I'm not seeing it anymore. Very odd. Must've been a bug on my end, possibly with something else. Anyway, thanks for the help.

[arm4b]

It's ok for me too.