diff --git a/js/src/modal.js b/js/src/modal.js
index 0daa428a8dfe..af396b56cf7f 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -443,7 +443,7 @@ class Modal {
_checkScrollbar() {
const rect = document.body.getBoundingClientRect()
- this._isBodyOverflowing = rect.left + rect.right < window.innerWidth
+ this._isBodyOverflowing = Math.round(rect.left + rect.right) < window.innerWidth
this._scrollbarWidth = this._getScrollbarWidth()
}
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index ff8102f444df..a72e93ca8582 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -649,6 +649,38 @@ describe('Modal', () => {
modal.show()
})
+ it('should not adjust the inline body padding when it does not overflow, even on a scaled display', done => {
+ fixtureEl.innerHTML = '
'
+
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
+ const originalPadding = window.getComputedStyle(document.body).paddingRight
+
+ // Remove body margins as would be done by Bootstrap css
+ document.body.style.margin = '0'
+
+ // Hide scrollbars to prevent the body overflowing
+ document.body.style.overflow = 'hidden'
+
+ // Simulate a discrepancy between exact, i.e. floating point body width, and rounded body width
+ // as it can occur when zooming or scaling the display to something else than 100%
+ document.documentElement.style.paddingRight = '.48px'
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ const currentPadding = window.getComputedStyle(document.body).paddingRight
+
+ expect(currentPadding).toEqual(originalPadding, 'body padding should not be adjusted')
+
+ // Restore overridden css
+ document.body.style.removeProperty('margin')
+ document.body.style.removeProperty('overflow')
+ document.documentElement.style.paddingRight = '16px'
+ done()
+ })
+
+ modal.show()
+ })
+
it('should enforce focus', done => {
fixtureEl.innerHTML = ''