From aecf8ec88be23eda6a79bd3bd2d04d63ed1a3521 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 28 May 2026 08:20:54 -0500
Subject: [PATCH] fix: timeline scroll flicker (#28653)

* test: fix scroll flicker

* lint
---
 .../assets/thumbnail/Thumbnail.svelte          | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
index a087aaf809..aef52d0cfd 100644
--- a/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/Thumbnail.svelte
@@ -205,11 +205,7 @@
 </script>
 
 <div
-  class={[
-    'group flex overflow-hidden transition-[background-color,border-radius] focus-visible:outline-none',
-    backgroundColorClass,
-    { 'rounded-xl': selected },
-  ]}
+  class={['group flex overflow-hidden focus-visible:outline-none', backgroundColorClass, { 'rounded-xl': selected }]}
   style:width="{width}px"
   style:height="{height}px"
   onmouseenter={onMouseEnter}
@@ -249,16 +245,8 @@
       ]}
     >
       <ImageThumbnail
-        class={[
-          'absolute transition-[border-radius] group-focus-visible:rounded-lg',
-          { 'rounded-xl': selected },
-          imageClass,
-        ]}
-        brokenAssetClass={[
-          'z-1 absolute group-focus-visible:rounded-lg transition-[border-radius]',
-          { 'rounded-xl': selected },
-          brokenAssetClass,
-        ]}
+        class={['absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, imageClass]}
+        brokenAssetClass={['z-1 absolute group-focus-visible:rounded-lg', { 'rounded-xl': selected }, brokenAssetClass]}
         url={getAssetMediaUrl({ id: asset.id, size: AssetMediaSize.Thumbnail, cacheKey: asset.thumbhash })}
         altText={$getAltText(asset)}
         widthStyle="{width}px"