[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

@@ -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);