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) + + $('
') + .on('shown.bs.modal', function () { + var currentPadding = $body.css('padding-right') + assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted') + $(this).bootstrapModal('hide') + + // restore scrollbars + $body.css('overflow', 'auto') + $('html').css('padding-right', '16px') + done() + }) + .bootstrapModal('show') + }) + QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) { assert.expect(2) var done = assert.async() @@ -525,7 +551,7 @@ $(function () { $('') .on('hidden.bs.modal', function () { - assert.ok(!$body.attr('style'), 'body does not have inline padding set') + assert.strictEqual($body.attr('style').indexOf('padding-right'), -1, 'body does not have inline padding set') $style.remove() done() })