Backport #30326

Prevent overflowing static backdrop modal animation

TODO: backport the test too

1 files changed, 14 insertions, 1 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index 0a2d99a032..ec44929f07 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -238,12 +238,25 @@ class Modal {
         return
       }
 
+      const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+
+      if (!isModalOverflowing) {
+        this._element.style.overflowY = 'hidden'
+      }
+
       this._element.classList.add(CLASS_NAME_STATIC)
 
-      const modalTransitionDuration = Util.getTransitionDurationFromElement(this._element)
+      const modalTransitionDuration = Util.getTransitionDurationFromElement(this._dialog)
+      $(this._element).off(Util.TRANSITION_END)
 
       $(this._element).one(Util.TRANSITION_END, () => {
         this._element.classList.remove(CLASS_NAME_STATIC)
+        if (!isModalOverflowing) {
+          $(this._element).one(Util.TRANSITION_END, () => {
+            this._element.style.overflowY = ''
+          })
+            .emulateTransitionEnd(this._element, modalTransitionDuration)
+        }
       })
         .emulateTransitionEnd(modalTransitionDuration)
       this._element.focus()