Twitter Bootstrap Modal scrolling the page up on show

Question

Clicking on a link which triggers a Twitter Bootstrap Modal to pop up is causing the browser to scroll up the page. This behavior is only occurring in Chrome.

Here is a demonstration page:

http://www.turizmburosu.com/test2.aspx

The page has 600 rows of links, causing the page body to exceed window height. If any of these links is clicked, it displays the modal dialog. When in Chrome, clicking any of the links below the initial view will cause the background page to scroll up (not always entirely to the top).

I am use the following function to trigger the display of the Modal:

function test(id, imp) {
    $("#modalLabel").html("Header");
    $("#modalBody").html("Body");
    $("#myModal").modal("show");
}

and the links are of the form:

<a href="" onclick="test();return false;">Test Link ###</a>

I am seeing this behavior in Chrome 22.0.1229.94 m.

Any suggestions/ideas as to why this is happening and how to prevent it?

---

Additional Example

This can be recreated on the Twitter Bootstrap documentation page for the Modal plugin.

Once on the page, simply override the existing data-api to use the JavaScript api instead:

$('#modals a[data-toggle="modal"]').on('click',
  function(e) {
    $('#myModal').modal('toggle');
    return false
  });

Now, if the Launch Demo Modal button is clicked, the page will scroll up when the modal is shown.

Again, this is using Chrome.

Philina

Can you post an example ? code ? image ? site link ? – Flavorsome

It seems to work fine for me..? [Version 22.0.1229.94 m] If so, post your own solution..? – Goodrich

works fine, try to delete the cache and reopen your webpage – Sungod

I'm using Version 22.0.1229.94 m and when the modal pops up, the body is scrolled up. Weird. Also in my other 2 computers (same version) same thing happens. – Philina

I'm seeing it. It's scrolling up by about 50 or so rows every time I click a link. – Kinna

I suspect it has something to do with the CSS transitions. Note that disabling them (i.e., $.support.transition = null) prevents the scrolling. Works fine in FF; IE9 has no transition support. Possibly a Chrome bug? – Kinna

Answer 1

Fixed (10/29/2012)

This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.

---

(original answer)

This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that

1. the browser supports CSS transitions (and you are using bootstrap-transition.js);
2. the modal has the class fade; and
3. when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).

It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.

More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.

A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.

Here is a demo using the patch bootstrap-modal.js:

JSFiddle

Kinna

Thanks, after looking for a long time this helped a lot. – Elma

@kritzikratzi Please provide a jsfiddle (or the like) demonstrating the issue, as well as browser info. If it is a legit bug, you should post to github (Issue #5336), but the concern there will be showing the bug is present in the latest version (v3.0.2), which as far as I see, it is not. – Kinna

I am having the same bug on v3.1.1.0 on every browser. I think it is due to some conflicts with my css or Javascript. But it is too big to debug. Any experiences? – Jahn

Not fixed here - I'm experiencing this with Bootstrap v3.2.0. – Outshoot

Answer 2

Same problem. It is caused by "#" in and the anchor is doing to scroll. I fixed that by deleting the anchor tag and place this:

<span onclick="$('#umisteni_modal').modal('show');" style="cursor:pointer;">Změnit místo dodání</span>

Tumbledown

Answer 3

I had a similar issue on my site, which was caused by another jquery plugin (sidr). When the sidebar was present and I opened a modal window, I would be sent back to top.

In jquery.sidr.js I changed line 102-106 from:

// Prepare page if container is body
if($body.is('body')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

To:

// Prepare page if container is body
if($body.is('body') && !$('#modal').hasClass('in')){
scrollTop = $html.scrollTop();
$html.css('overflow-x', 'hidden').scrollTop(scrollTop);
}

If you are using this plugin along with twitter bootstrap's modal, maybe this can help you.

Yaroslavl

Answer 4

I had the same problem because of these lines of CSS which were thought to permantly display scrollbars in the browser. Removing the two lines solved the problem:

html,
body {
    min-height: 100%;
    height: 101%;
}

Decolorant

Answer 5

to bring the focus back on close

var triggerOffset=0;
$('.modal').on('show.bs.modal', function() {
    triggerOffset=$(window).scrollTop();
});
$('.modal').on('hidden.bs.modal', function() {
     var animationTime=1;
    $('html, body').animate({
        scrollTop: (triggerOffset)
    }, animationTime);
});

Bacterium

Answer 6

I had been having this issue for so long but my solution was to remove href from the anchor tag

i.e.

<a onclick="test();return false;">Test Link ###</a>

I get no jump now

Hope this helps someone in the future

Distaff

Answer 7

I was facing the same issue (in Bootstrap v3.3.5) and adding following CSS resolved it for me:

body.modal-open {
  display: inline;
}

Seeker