limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-29 05:17:39 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: webkit blur effects

Browse source
This commit is contained in:
freeplay 2023-07-01 19:21:26 -04:00
parent 0d7010d5f1
commit 28d2d06f32
2 changed files with 7 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/src/components/global/MkPageHeader.vue
View file

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

20
packages/client/src/pages/user/home.vue
View file

@ -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);
}
}