From b6bf3cfcb7dfa8aa5740cf58d750b730ec6ea0eb 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: Thu, 16 Oct 2025 18:04:08 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=90=E3=83=8A=E3=83=BC?=
 =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=81=AE=E7=94=BB=E9=9D=A2=E4=B8=8A=E3=81=A7?=
 =?UTF-8?q?=E3=81=AE=E3=82=AF=E3=83=AD=E3=83=83=E3=83=97=E3=81=8C=E4=BB=A5?=
 =?UTF-8?q?=E5=89=8D=E3=81=AE=E6=8C=99=E5=8B=95=E3=81=A8=E5=90=8C=E4=B8=80?=
 =?UTF-8?q?=E3=81=AB=E3=81=AA=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#1665?=
 =?UTF-8?q?8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): バナー画像の画面上でのクロップが以前の挙動と同一になるように

* fix
---
 packages/frontend/src/pages/user/home.vue | 25 ++++++++++-------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 3002eddda8..ae7893a7a8 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -368,23 +368,19 @@ onDeactivated(disposeBannerParallaxResizeObserver);
 
 				> .banner-container {
 					position: relative;
-					height: 250px;
+					--bannerHeight: 250px;
+					height: var(--bannerHeight);
 					overflow: clip;
-					background-size: cover;
-					background-position: center;
 
 					> .banner {
-						position: absolute;
-						top: 50%;
-						left: 0;
 						width: 100%;
-						height: 300%;
-						background-size: 100% auto;
+						height: 100%;
+						background-size: cover;
 						background-color: #4c5e6d;
 						background-repeat: repeat-y;
-						background-position: center;
-						will-change: transform;
-						transform: translateY(-50%);
+						background-position-x: center;
+						background-position-y: 50%;
+						will-change: background-position-y;
 					}
 
 					> .fade {
@@ -677,7 +673,8 @@ onDeactivated(disposeBannerParallaxResizeObserver);
 		> .main {
 			> .profile > .main {
 				> .banner-container {
-					height: 140px;
+					--bannerHeight: 140px;
+					height: var(--bannerHeight);
 
 					> .fade {
 						display: none;
@@ -763,10 +760,10 @@ onDeactivated(disposeBannerParallaxResizeObserver);
 
 @keyframes bannerParallaxKeyframes {
 	from {
-		transform: translateY(-50%);
+		background-position-y: 50%;
 	}
 	to {
-		transform: translateY(-30%);
+		background-position-y: calc(50% + var(--bannerHeight, 250px) / 3);
 	}
 }
 </style>