oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Pull Requests Packages Releases 2 Activity

perf(frontend/css): MkNote 及び MkNotification に content-visibility を適用 (MisskeyIO#892)

Browse Source
This commit is contained in:
あわわわとーにゅ 2025-01-16 23:05:02 +09:00 committed by GitHub
parent cbe80fdd26
commit 6993e5b7fd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/src/components/MkNote.vue
View File

@ -569,13 +569,8 @@ function emitUpdReaction(emoji: string, delta: number) {
overflow: clip;
contain: content;
// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
// ノートがマウントされたときに自身の高さを取得し contain-intrinsic-size を設定しなおせばほぼ解決できそうだが、
// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
//content-visibility: auto;
//contain-intrinsic-size: 0 128px;
content-visibility: auto;
contain-intrinsic-size: auto none auto 128px;
&:focus-visible {
outline: none;

3
packages/frontend/src/components/MkNotification.vue
View File

@ -218,6 +218,9 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
overflow-wrap: break-word;
display: flex;
contain: content;
content-visibility: auto;
contain-intrinsic-size: auto none auto 100px;
}
.head {