diff --git a/js/src/modal.js b/js/src/modal.js index 2ff93342d5..4068471cd7 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -427,7 +427,8 @@ const Modal = (() => { } _checkScrollbar() { - this._isBodyOverflowing = document.body.clientWidth < window.innerWidth + const rect = document.body.getBoundingClientRect() + this._isBodyOverflowing = rect.left + rect.right < window.innerWidth this._scrollbarWidth = this._getScrollbarWidth() } diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 5b265df158..735dc4f0c8 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -21,6 +21,8 @@ $(function () { document.body.removeChild(scrollDiv) return scrollbarWidth } + // Simulate scrollbars in PhantomJS + $('html').css('padding-right', '16px') }, beforeEach: function () { // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode @@ -391,6 +393,30 @@ $(function () { .bootstrapModal('show') }) + QUnit.test('should not adjust the inline body padding when it does not overflow', function (assert) { + assert.expect(1) + var done = assert.async() + var $body = $(document.body) + var originalPadding = $body.css('padding-right') + + // Hide scrollbars to prevent the body overflowing + $body.css('overflow', 'hidden') // real scrollbar (for in-browser testing) + $('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS) + + $('