From 1b618b323424e29b0ddf9eae686e0ef2540b3627 Mon Sep 17 00:00:00 2001
From: "Robin Lejeune (role)" <role@odoo.com>
Date: Fri, 26 May 2023 11:38:43 +0200
Subject: [PATCH] [FIX] website: fix animations in popups without backdrop

Since the scrollbar was moved from the window to .modal-content at [1],
animations inside popups without backdrops would not be working anymore
because the scroll was not checked against the right element.

This commit fixes this by using the right scroll element's scrollTop.

task-3328419

[1] https://github.com/odoo/odoo/commit/cb7cf77

closes odoo/odoo#122622

Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>
---
 .../static/src/js/content/snippets.animation.js    | 14 +++++++++-----
 .../website/static/src/snippets/s_popup/001.scss   |  3 ++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 461fdc903dba..52a9923305ea 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1451,11 +1451,15 @@ registry.WebsiteAnimate = publicWidget.Widget.extend({
             // We need to offset for the change in position from some animation.
             // So we get the top value by not taking CSS transforms into calculations.
             // Cookies bar might be opened and considered as a modal but it is
-            // not really one (eg 'discrete' layout), and should not be used as
-            // scrollTop value.
-            const $closestModal = $el.closest(".modal:visible");
-            const scrollTop = $closestModal[0] ?
-                $closestModal.scrollTop() : this.$scrollingElement.scrollTop();
+            // not really one when there is no backdrop (eg 'discrete' layout),
+            // and should not be used as scrollTop value.
+            const closestModal = $el.closest(".modal:visible")[0];
+            let scrollTop = this.$scrollingElement[0].scrollTop;
+            if (closestModal) {
+                scrollTop = closestModal.classList.contains("s_popup_no_backdrop") ?
+                    closestModal.querySelector(".modal-content").scrollTop :
+                    closestModal.scrollTop;
+            }
             const elTop = this._getElementOffsetTop(el) - scrollTop;
             let visible;
             const footerEl = el.closest('.o_footer_slideout');
diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss
index 7eb56e1a93d2..b591d30c7796 100644
--- a/addons/website/static/src/snippets/s_popup/001.scss
+++ b/addons/website/static/src/snippets/s_popup/001.scss
@@ -64,7 +64,8 @@
 
             .modal-content {
                 max-height:100%;
-                overflow: auto;
+                overflow-y: auto;
+                overflow-x: hidden;
             }
         }
     }
-- 
GitLab