From 61ad79ec17033efd7ec2cf2637544434af8f3580 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sat, 1 Jul 2023 19:21:26 -0400
Subject: [PATCH] fix: webkit blur effects

---
 .../src/components/global/MkPageHeader.vue    |  4 ++--
 packages/client/src/pages/user/home.vue       | 20 +++++--------------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 08c27bcf76..f24d3de05a 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -307,6 +307,8 @@ onUnmounted(() => {
 	padding-inline: 24px;
 	box-sizing: border-box;
 	overflow: hidden;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
 	@media (max-width: 500px) {
 		padding-inline: 16px;
 		&.tabs > .buttons > :deep(.follow-button > span) {
@@ -345,8 +347,6 @@ onUnmounted(() => {
 		position: absolute;
 		inset: 0;
 		border-bottom: solid 0.5px var(--divider);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
 		z-index: -1;
 	}
 	&::after {
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 9e9dfcc7c7..a8aa2844f5 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -20,11 +20,11 @@
 					/>
 
 					<div :key="user.id" class="_block main">
-						<div class="banner-container" :style="style">
+						<div class="banner-container">
 							<div
 								ref="bannerEl"
 								class="banner"
-								:style="style"
+								:style="{ backgroundImage: `url('${user.bannerUrl}')` }"
 							></div>
 							<div class="fade"></div>
 							<div class="title">
@@ -405,13 +405,6 @@ let narrow = $ref<null | boolean>(null);
 let rootEl = $ref<null | HTMLElement>(null);
 let bannerEl = $ref<null | HTMLElement>(null);
 
-const style = $computed(() => {
-	if (props.user.bannerUrl == null) return {};
-	return {
-		backgroundImage: `url(${props.user.bannerUrl})`,
-	};
-});
-
 const age = $computed(() => {
 	return calcAge(props.user.birthday);
 });
@@ -502,7 +495,6 @@ onUnmounted(() => {
 					overflow: hidden;
 					background-size: cover;
 					background-position: center;
-
 					> .banner {
 						height: 100%;
 						background-color: #26233a;
@@ -510,17 +502,15 @@ onUnmounted(() => {
 						background-position: center;
 						box-shadow: 0 0 128px var(--shadow) inset;
 						will-change: background-position;
-
-						&::after {
+						&::before {
 							content: "";
-							background-image: var(--blur, inherit);
 							position: fixed;
 							inset: 0;
+							background: var(--blur, inherit);
 							background-size: cover;
 							background-position: center;
 							pointer-events: none;
-							opacity: 0.1;
-							filter: var(--blur, blur(10px));
+							filter: blur(12px) opacity(.1);
 						}
 					}