From 8eab9edb15feee1f61aab33cd0f16100ad89dab9 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 28 Apr 2026 19:05:43 -0700
Subject: [PATCH] fix performance issue related to blurred library header

---
 .../library-background-overlay.module.css         | 15 +++++++++++++++
 .../components/library-background-overlay.tsx     |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/renderer/features/shared/components/library-background-overlay.module.css b/src/renderer/features/shared/components/library-background-overlay.module.css
index fc1e178f3..c109c78c5 100644
--- a/src/renderer/features/shared/components/library-background-overlay.module.css
+++ b/src/renderer/features/shared/components/library-background-overlay.module.css
@@ -6,6 +6,8 @@
     pointer-events: none;
     user-select: none;
     background-image: var(--theme-overlay-subheader);
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
 }
 
 .background-overlay {
@@ -30,6 +32,18 @@
         var(--dither);
 }
 
+.background-image-stack {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    pointer-events: none;
+    isolation: isolate;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+}
+
 .background-image {
     position: absolute;
     top: 0;
@@ -37,6 +51,7 @@
     width: 100%;
     background-position: center !important;
     background-size: cover !important;
+    isolation: isolate;
     opacity: 0.7;
 }
 
diff --git a/src/renderer/features/shared/components/library-background-overlay.tsx b/src/renderer/features/shared/components/library-background-overlay.tsx
index 53f045430..d17ea7afd 100644
--- a/src/renderer/features/shared/components/library-background-overlay.tsx
+++ b/src/renderer/features/shared/components/library-background-overlay.tsx
@@ -76,7 +76,7 @@ export const LibraryBackgroundImage = ({ blur, headerRef, imageUrl }: LibraryBac
     const url = imageUrl ? `url(${imageUrl})` : undefined;
     const height = useHeaderHeight(headerRef);
     return (
-        <>
+        <div className={styles.backgroundImageStack}>
             <div
                 className={styles.backgroundImage}
                 style={{
@@ -91,7 +91,7 @@ export const LibraryBackgroundImage = ({ blur, headerRef, imageUrl }: LibraryBac
                     height: height ? `${height + 64}px` : undefined,
                 }}
             />
-        </>
+        </div>
     );
 };