<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
    margin-right: 15px;
    margin-right: 0: // fix
}"><pre class="notranslate"><code class="notranslate">body.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
    margin-right: 15px;
    margin-right: 0: // fix
}
</code></pre></div>
<p dir="auto">In my individual use case, and over on the (getbootstrap.com)[http://getbootstrap.com/javascript/#modals] docs, the above CSS is causing an unnecessary margin change on body and fixed nav bars. Removing it or setting it to 0 fixes the issue.</p>
<p dir="auto">When launching the modal component (<a href="http://getbootstrap.com/javascript/#modals" rel="nofollow">http://getbootstrap.com/javascript/#modals</a>) the entire content will slightly move to the left on mac OS (haven't tried it on windows yet). With the active modal the scrollbar seem to disappear, while the content width still changes.</p>
<p dir="auto">You can observer the problem on the bootstrap page</p>