From bc7a1c838ca3ab5db3e86b2d8a98733d964e6e7c Mon Sep 17 00:00:00 2001
From: agent-steven <mannam250707@gmail.com>
Date: Sat, 14 Feb 2026 02:18:44 +0900
Subject: [PATCH] fix(web): add checkerboard background for transparent images
 (#26091)

Co-authored-by: steven94kr <rlgns98kr@gmail.com>
Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
---
 web/src/lib/components/asset-viewer/photo-viewer.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index 2101107f6e..7c3ab2eb21 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -226,7 +226,7 @@
         alt={$getAltText(toTimelineAsset(asset))}
         class="h-full w-full {$slideshowState === SlideshowState.None
           ? 'object-contain'
-          : slideshowLookCssMapping[$slideshowLook]}"
+          : slideshowLookCssMapping[$slideshowLook]} checkerboard"
         draggable="false"
       />
       <!-- eslint-disable-next-line svelte/require-each-key -->
@@ -259,4 +259,8 @@
     visibility: hidden;
     animation: 0s linear 0.4s forwards delayedVisibility;
   }
+  .checkerboard {
+    background-image: conic-gradient(#808080 25%, #b0b0b0 25% 50%, #808080 50% 75%, #b0b0b0 75%);
+    background-size: 20px 20px;
+  }
 </style>