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

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

* Update Changelog

1 files changed, 21 insertions, 6 deletions

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