From 18355a0838fb76cfbff349f9d854a5d9c2641584 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 28 Mar 2025 16:34:21 +0900
Subject: [PATCH] perf(frontend): avoid main thread scroll repaint

---
 packages/frontend/src/style.scss       | 8 ++++++++
 packages/frontend/src/ui/deck.vue      | 2 +-
 packages/frontend/src/ui/universal.vue | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index f122f47c06..17080e5fbc 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -178,6 +178,14 @@ rt {
 	overflow: clip;
 	overflow-y: scroll;
 	overscroll-behavior: contain;
+
+	/*
+	理屈は知らないけど、ここでbackgroundを設定しておかないと
+	スクロールコンテナーが少なくともChromeにおいて
+	main thread scrolling になってしまい、パフォーマンスが(多分)落ちる。
+	backgroundが透明だと裏側を描画しないといけなくなるとかそういう理由かもしれない
+	*/
+	background: var(--MI_THEME-bg);
 }
 
 ._pageScrollableReversed {
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index fc6b023a51..2d1917a346 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -233,7 +233,7 @@ body {
 }
 
 body {
-	/* NOTE: htmlにも overflow: clip を設定したいところだが、設定すると何故か少なくともChromeでhtmlがmain thread scroll repaint扱いになりパフォーマンスが(多分)落ちる */
+	/* NOTE: htmlにも overflow: clip を設定したいところだが、設定すると何故か少なくともChromeで html が main thread scrolling になりパフォーマンスが(多分)落ちる */
 	overflow: clip;
 }
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index d067fe738c..5e64de6ffe 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -223,7 +223,7 @@ body {
 }
 
 body {
-	/* NOTE: htmlにも overflow: clip を設定したいところだが、設定すると何故か少なくともChromeでhtmlがmain thread scroll repaint扱いになりパフォーマンスが(多分)落ちる */
+	/* NOTE: htmlにも overflow: clip を設定したいところだが、設定すると何故か少なくともChromeで html が main thread scrolling になりパフォーマンスが(多分)落ちる */
 	overflow: clip;
 }