From 9920d428e58afb034d753091668523ed36f59797 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
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#125260
X-original-commit: 5766aefcd354e89094c8e650b29529301e39d49d
Signed-off-by: Dieleman Guillaume (gdi) <gdi@odoo.com>
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
---
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 7e1619ec04bf..d0b1654afca5 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -1118,6 +1118,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);
--
GitLab