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

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

* Update Changelog

CHANGELOG.md

@@ -6,6 +6,7 @@
 ### Client
 - Fix: カスタム絵文字画面(beta)のaliasesで使用される区切り文字が一致していないのを修正 #15614
 - Fix: バナー画像の幅が表示領域と一致していない問題を修正
+- Fix: 一部のブラウザでバナー画像が上下中央に表示されない問題を修正
 
 ### Server
 -

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%);