From 958f0ac78bcd5153d3d666b9c5475929716edd09 Mon Sep 17 00:00:00 2001
From: PGray <77597544+PGrayCS@users.noreply.github.com>
Date: Mon, 15 Sep 2025 23:26:17 +0100
Subject: [PATCH] chore: Update CSS styles for zen-glance sidebar container,
 p=#10383

---
 src/zen/glance/ZenGlanceManager.mjs | 43 +++++++++++++++++++++--------
 src/zen/glance/zen-glance.css       |  4 +++
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs
index 6add728fe..22ce96ee6 100644
--- a/src/zen/glance/ZenGlanceManager.mjs
+++ b/src/zen/glance/ZenGlanceManager.mjs
@@ -167,13 +167,26 @@
           const newButtons = this.#createNewOverlayButtons();
           this.browserWrapper.appendChild(newButtons);
 
+          // Performance: backdrop-filter blur on Windows significantly impacts scroll smoothness
+          // in the Glance preview (particularly for wheel scrolling). Avoid applying it on Windows.
+          const parentSidebarContainer = this.#currentParentTab.linkedBrowser.closest(
+            '.browserSidebarContainer'
+          );
+          const isWindows = AppConstants.platform === 'win';
+          const backgroundOpenAnimationProps = isWindows
+            ? {
+                // Skip blur on Windows, keep a subtle dim/scale to preserve the visual cue
+                scale: [1, 0.98],
+                opacity: [1, 0.85],
+              }
+            : {
+                scale: [1, 0.98],
+                backdropFilter: ['blur(0px)', 'blur(5px)'],
+                opacity: [1, 0.5],
+              };
           gZenUIManager.motion.animate(
-            this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
-            {
-              scale: [1, 0.98],
-              backdropFilter: ['blur(0px)', 'blur(5px)'],
-              opacity: [1, 0.5],
-            },
+            parentSidebarContainer,
+            backgroundOpenAnimationProps,
             {
               duration: 0.4,
               type: 'spring',
@@ -318,14 +331,22 @@
             sidebarButtons.remove();
           });
       }
-      gZenUIManager.motion
-        .animate(
-          browserSidebarContainer,
-          {
+      const isWindows = AppConstants.platform === 'win';
+      const backgroundCloseAnimationProps = isWindows
+        ? {
+            // Mirror open animation without blur on Windows
+            scale: [0.98, 1],
+            opacity: [0.85, 1],
+          }
+        : {
             scale: [0.98, 1],
             backdropFilter: ['blur(5px)', 'blur(0px)'],
             opacity: [0.5, 1],
-          },
+          };
+      gZenUIManager.motion
+        .animate(
+          browserSidebarContainer,
+          backgroundCloseAnimationProps,
           {
             duration: 0.4,
             type: 'spring',
diff --git a/src/zen/glance/zen-glance.css b/src/zen/glance/zen-glance.css
index 40de8005b..d9ad406e9 100644
--- a/src/zen/glance/zen-glance.css
+++ b/src/zen/glance/zen-glance.css
@@ -108,6 +108,8 @@
   box-shadow: none !important;
   visibility: inherit;
   z-index: 1;
+  /* Hint compositor to optimize animations and scrolling */
+  will-change: transform, opacity, filter;
 
   :root[zen-no-padding='true'] & {
     --zen-native-inner-radius: 0px;
@@ -120,6 +122,8 @@
     top: 0;
     left: 0;
     flex: unset !important;
+    /* Promote to its own layer during transitions to reduce jank */
+    will-change: transform, opacity, top, left, width, height;
 
     &[has-finished-animation='true'] {
       position: relative !important;