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