diff options
| -rw-r--r-- | addons/website/static/src/js/content/snippets.animation.js | 15 | ||||
| -rw-r--r-- | addons/website/static/src/scss/website.scss | 3 |
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; } } |