From f8c6273acc87cae945e9c37ef0a542a95ee57b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 10 Oct 2025 09:33:35 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20scroll-driven=20animation?=
 =?UTF-8?q?=E9=9D=9E=E5=AF=BE=E5=BF=9C=E7=92=B0=E5=A2=83=E3=81=A7=E3=83=90?=
 =?UTF-8?q?=E3=83=8A=E3=83=BC=E7=94=BB=E5=83=8F=E3=81=8C=E4=B8=8A=E4=B8=8B?=
 =?UTF-8?q?=E4=B8=AD=E5=A4=AE=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=20(#16632)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): scroll-driven animation非対応環境でバナー画像が上下中央に表示されない問題を修正

* Update Changelog
---
 CHANGELOG.md                              |  1 +
 packages/frontend/src/pages/user/home.vue | 27 ++++++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73709c56c9..30018a9d23 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 ### Client
 - Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
 - Fix: バナー画像の幅が表示領域と一致していない問題を修正
+- Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
 
 ### Server
 -
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 78730b1811..3002eddda8 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -372,9 +372,6 @@ onDeactivated(disposeBannerParallaxResizeObserver);
 					overflow: clip;
 					background-size: cover;
 					background-position: center;
-					view-timeline-name: --bannerParallax;
-					view-timeline-inset: var(--bannerParallaxInset, auto);
-					view-timeline-axis: block;
 
 					> .banner {
 						position: absolute;
@@ -387,9 +384,7 @@ onDeactivated(disposeBannerParallaxResizeObserver);
 						background-repeat: repeat-y;
 						background-position: center;
 						will-change: transform;
-						animation: bannerParallaxKeyframes linear both;
-						animation-timeline: --bannerParallax;
-						animation-range: cover;
+						transform: translateY(-50%);
 					}
 
 					> .fade {
@@ -746,6 +741,26 @@ onDeactivated(disposeBannerParallaxResizeObserver);
 	}
 }
 
+@supports (view-timeline-name: --name) {
+	.ftskorzw {
+		> .main {
+			> .profile > .main {
+				> .banner-container {
+					view-timeline-name: --bannerParallax;
+					view-timeline-inset: var(--bannerParallaxInset, auto);
+					view-timeline-axis: block;
+
+					> .banner {
+						animation: bannerParallaxKeyframes linear both;
+						animation-timeline: --bannerParallax;
+						animation-range: cover;
+					}
+				}
+			}
+		}
+	}
+}
+
 @keyframes bannerParallaxKeyframes {
 	from {
 		transform: translateY(-50%);