[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#60361

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

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();
     },
 });
 

addons/website/static/src/scss/website.scss

@@ -1218,8 +1218,7 @@ header {
                 }
             }
             > footer {
-                @include o-position-absolute(0, 0, 0, 0);
-                position: sticky;
+                @include o-position-sticky(auto, 0, 0, 0);
                 z-index: -1;
             }
         }