[FIX] website: restore footer slideout effect on Firefox

For some strange reason, the footer slideout effect was not working on
Firefox anymore. The height of the footer is not understood by Firefox
sticky implementation which it seems to not understand because of the
combination of 3 items: the footer is the last :visible element in the
`#wrapwrap`, the `#wrapwrap` uses flex layout and the `#wrapwrap` is the
element with a scrollbar.

As neither of the last two items can be changed, this commit fixes the
problem by adding a pixel div element in the DOM after the footer on
page load, if the slideout effect is enabled. This is obviously not
ideal but solves the problem while waiting for another solution.

Part of https://github.com/odoo/odoo/pull/60271
task-2312878

closes odoo/odoo#60271

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 16 insertions, 2 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 3135d19aeee..a08aa1d1014 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -981,6 +981,20 @@ registry.FooterSlideout = publicWidget.Widget.extend({
         const $main = this.$('> main');
         const slideoutEffect = $main.outerHeight() >= $(window).outerHeight();
         this.el.classList.toggle('o_footer_effect_enable', slideoutEffect);
+
+        // Add a pixel div over the footer, after in the DOM, so that the
+        // height of the footer is understood by Firefox sticky implementation
+        // (which it seems to not understand because of the combination of 3
+        // items: the footer is the last :visible element in the #wrapwrap, the
+        // #wrapwrap uses flex layout and the #wrapwrap is the element with a
+        // scrollbar).
+        // TODO check if the hack is still needed by future browsers.
+        this.__pixelEl = document.createElement('div');
+        this.__pixelEl.style.width = `1px`;
+        this.__pixelEl.style.height = `1px`;
+        this.__pixelEl.style.marginTop = `-1px`;
+        this.el.appendChild(this.__pixelEl);
+
         return this._super(...arguments);
     },
     /**
@@ -989,6 +1003,7 @@ registry.FooterSlideout = publicWidget.Widget.extend({
     destroy() {
         this._super(...arguments);
         this.el.classList.remove('o_footer_effect_enable');
+        this.__pixelEl.remove();
     },
 });
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 7d2c143c5f1..9f79e9565b4 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1213,8 +1213,7 @@ header {
                 }
             }
             > footer {
-                @include o-position-absolute(0, 0, 0, 0);
-                position: sticky;
+                @include o-position-sticky(auto, 0, 0, 0);
                 z-index: -1;
             }
         }