usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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

* fix
This commit is contained in:
かっこかり 2025-10-16 18:04:08 +09:00 committed by GitHub
parent a132a1d3e1
commit b6bf3cfcb7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/frontend/src/pages/user/home.vue
View File

@ -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>