From 4d35c9d2c3effbe14444983b86ef5444cde065ea Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 25 Sep 2024 09:42:30 +0800
Subject: [PATCH] Try fix that hard-to-reproduce avatar flicker

---
 src/components/account-block.jsx | 12 +++++----
 src/components/account-info.css  | 43 +++++++++++++++++++-------------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/account-block.jsx b/src/components/account-block.jsx
index 1a83a998..0d1f2faa 100644
--- a/src/components/account-block.jsx
+++ b/src/components/account-block.jsx
@@ -105,11 +105,13 @@ function AccountBlock({
         }
       }}
     >
-      <Avatar
-        url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
-        size={avatarSize}
-        squircle={bot}
-      />
+      <div class="avatar-container">
+        <Avatar
+          url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
+          size={avatarSize}
+          squircle={bot}
+        />
+      </div>
       <span class="account-block-content">
         {!hideDisplayName && (
           <>
diff --git a/src/components/account-info.css b/src/components/account-info.css
index 18d15be4..1c8f34c6 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -217,13 +217,13 @@
     background-image: none;
   }
 
-  & + header .avatar + * {
+  & + header .avatar-container + * {
     transition: opacity 0.3s ease-in-out;
     opacity: 0 !important;
   }
 
   &,
-  & + header .avatar {
+  & + header .avatar-container {
     transition: filter 0.3s ease-in-out;
     filter: none !important;
   }
@@ -250,16 +250,21 @@
     -8px 0 24px var(--header-color-3, --bg-color),
     8px 0 24px var(--header-color-4, --bg-color);
   animation: fade-in 0.3s both ease-in-out 0.1s;
-}
-.account-container header .avatar {
-  /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
+
+  .avatar-container {
+    filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
+      drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
+  }
+
+  .avatar {
+    /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
     8px 0 24px var(--header-color-4, --bg-color); */
-  overflow: initial;
-  filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
-    drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
-}
-.account-container header .avatar:not(.has-alpha) img {
-  border-radius: inherit;
+    /* overflow: initial; */
+
+    &:not(.has-alpha) img {
+      border-radius: inherit;
+    }
+  }
 }
 
 .account-container main > *:first-child {
@@ -754,12 +759,16 @@
     letter-spacing: -0.5px;
     mix-blend-mode: multiply;
     gap: 12px;
-  }
-  .timeline-start .account-container header .account-block .avatar {
-    width: 112px !important;
-    height: 112px !important;
-    filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
-      drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
+
+    .avatar-container {
+      filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
+        drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
+    }
+
+    .avatar {
+      width: 112px !important;
+      height: 112px !important;
+    }
   }
 }