From bd98ef5944f4afd0274b0dd0ae3db92565965b0a Mon Sep 17 00:00:00 2001 From: "Arthur Detroux (ard)" Date: Tue, 23 May 2023 07:23:52 +0000 Subject: [PATCH] [FIX] website: Fix footer Slide Hover glitching on Safari Prior to this commit, when using the "Slide Hover" reveal effect on the footer, Safari would glitch it scrolls and could result in unreadable content. This commit fixes this by a weird hack that seems to work. Adding an element with a background-image and a background-attachment set to fixed seems to resolve the issue. task-3302302 closes odoo/odoo#125346 X-original-commit: 5766aefcd354e89094c8e650b29529301e39d49d Signed-off-by: Dieleman Guillaume (gdi) Signed-off-by: Arthur Detroux (ard) --- addons/website/static/src/js/content/snippets.animation.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index ea84cd953d0..577aef1314d 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -1132,6 +1132,13 @@ registry.FooterSlideout = publicWidget.Widget.extend({ this.__pixelEl.style.width = `1px`; this.__pixelEl.style.height = `1px`; this.__pixelEl.style.marginTop = `-1px`; + // On safari, add a background attachment fixed to fix the glitches that + // appear when scrolling the page with a footer slide out. + if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { + this.__pixelEl.style.backgroundColor = "transparent"; + this.__pixelEl.style.backgroundAttachment = "fixed"; + this.__pixelEl.style.backgroundImage = "url(/website/static/src/img/website_logo.svg)"; + } this.el.appendChild(this.__pixelEl); return this._super(...arguments);