diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index b44afa7d11..630beabb3c 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -823,6 +823,7 @@ function emitUpdReaction(emoji: string, delta: number) { width: 28px; height: 28px; margin: 0 8px 0 0; + transform: translateZ(0); } .renoteText { @@ -830,6 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) { flex-shrink: 1; text-overflow: ellipsis; white-space: nowrap; + will-change: transform, opacity; } .renoteUserName { diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 55417d0087..dc54e0250b 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -770,6 +770,7 @@ onMounted(() => { height: 28px; margin: 0 8px 0 0; border-radius: 6px; + transform: translateZ(0); } .renoteText { @@ -800,6 +801,7 @@ onMounted(() => { .note { padding: 32px; font-size: 1.2em; + will-change: transform, opacity; &:hover > .main > .footer > .button { opacity: 1; @@ -818,6 +820,7 @@ onMounted(() => { flex-shrink: 0; width: 58px; height: 58px; + transform: translateZ(0); } .noteHeaderBody {