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

…#892)
MisskeyIO · Jan 16, 2025 · 6993e5b · 6993e5b
1 parent cbe80fd
commit 6993e5b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -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;

diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
@@ -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 {