diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-10 12:24:50 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-10 12:24:50 +0900 |
| commit | 0729678398eb12c2e5c8e7f156355e4ec53c9899 (patch) | |
| tree | 47424fd1042b0fb5bf7cf270092dbf2a98d93e8c | |
| parent | add X-Robots-Tag: noai (diff) | |
| download | sharkey-0729678398eb12c2e5c8e7f156355e4ec53c9899.tar.gz sharkey-0729678398eb12c2e5c8e7f156355e4ec53c9899.tar.bz2 sharkey-0729678398eb12c2e5c8e7f156355e4ec53c9899.zip | |
fix(frontend): ブラーエフェクトを有効にしている状態で高負荷になる問題を修正
| -rw-r--r-- | CHANGELOG.md | 2 | ||||
| -rw-r--r-- | packages/frontend/src/components/global/MkAvatar.vue | 20 |
2 files changed, 2 insertions, 20 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 301fe02ef5..767f98e8e7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,7 @@ - 投稿したコンテンツのAIによる学習を軽減するオプションを追加 ### Client -- +- Fix: ブラーエフェクトを有効にしている状態で高負荷になる問題を修正 ### Server - diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index ad36dcabe4..42abdcbdcc 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -2,7 +2,7 @@ <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick"> <img :class="$style.inner" :src="url" decoding="async"/> <MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> - <div v-if="user.isCat" :class="[$style.ears, { [$style.mask]: useBlurEffect }]"> + <div v-if="user.isCat" :class="[$style.ears]"> <div :class="$style.earLeft"> <div v-if="false" :class="$style.layer"> <div :class="$style.plot" :style="{ backgroundImage: `url(${JSON.stringify(url)})` }"/> @@ -154,24 +154,6 @@ watch(() => props.user.avatarBlurhash, () => { padding: 50%; pointer-events: none; - &.mask { - -webkit-mask: - url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><filter id="a"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter><circle cx="16" cy="16" r="15" filter="url(%23a)"/></svg>') center / 50% 50%, - linear-gradient(#fff, #fff); - -webkit-mask-composite: destination-out, source-over; - mask: - url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><filter id="a"><feGaussianBlur in="SourceGraphic" stdDeviation="1"/></filter><circle cx="16" cy="16" r="15" filter="url(%23a)"/></svg>') exclude center / 50% 50%, - linear-gradient(#fff, #fff); // polyfill of `image(#fff)` - - > .earLeft { - animation: eartightleft 6s infinite; - } - - > .earRight { - animation: eartightright 6s infinite; - } - } - > .earLeft, > .earRight { contain: strict; |