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

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