From 02ad4937389cb4c562025179c7115698b4c80b57 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Thu, 17 Nov 2022 23:45:04 +0800
Subject: [PATCH 1/4] fix(web): reduce page jitter

---
 web_src/less/_base.less | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index dc0e69c6d1ba7..7e59830ae02ea 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -205,6 +205,7 @@ body {
   display: flex;
   flex-direction: column;
   overflow-wrap: break-word;
+  scrollbar-gutter: stable;
 }
 
 img {
@@ -244,25 +245,6 @@ progress::-moz-progress-bar {
   caret-color: var(--color-caret);
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 0 6px var(--color-primary);
-  border: 2px solid transparent;
-  border-radius: 5px !important;
-}
-::-webkit-scrollbar-thumb:window-inactive {
-  box-shadow: inset 0 0 0 6px var(--color-primary);
-}
-::-webkit-scrollbar-thumb:hover {
-  box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
 ::file-selector-button {
   border: 1px solid var(--color-light-border);
   color: var(--color-text-light);

From 13c33def5052057fb645a6775f439cefc8415f0b Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Fri, 18 Nov 2022 14:34:46 +0800
Subject: [PATCH 2/4] revert(web): incorrectly removes custom scrollbar

---
 web_src/less/_base.less | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 7e59830ae02ea..f568d7e23c55a 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -245,6 +245,25 @@ progress::-moz-progress-bar {
   caret-color: var(--color-caret);
 }
 
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px var(--color-primary);
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px var(--color-primary);
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 ::file-selector-button {
   border: 1px solid var(--color-light-border);
   color: var(--color-text-light);

From b9be0209ac6ab1542d88b53b531910ddfeb66c95 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Fri, 18 Nov 2022 14:36:07 +0800
Subject: [PATCH 3/4] fix(web): empty space in as few browsers as possible

---
 web_src/less/_base.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index f568d7e23c55a..e4b52a2c8e46f 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -201,7 +201,8 @@ h6 {
 body {
   color: var(--color-text);
   background-color: var(--color-body);
-  overflow-y: auto;
+  overflow-y: overlay;
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
   overflow-wrap: break-word;

From 5a46f90752a37fe83040ac3aae8e0082d85d2b75 Mon Sep 17 00:00:00 2001
From: Percy Ma <kecrily@gmail.com>
Date: Mon, 21 Nov 2022 12:57:47 +0800
Subject: [PATCH 4/4] fix: use overlay scrollbar on supported browsers

---
 web_src/less/_base.less | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index e4b52a2c8e46f..f8ee9202b6566 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -201,12 +201,17 @@ h6 {
 body {
   color: var(--color-text);
   background-color: var(--color-body);
-  overflow-y: overlay;
-  overflow-y: scroll;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   overflow-wrap: break-word;
-  scrollbar-gutter: stable;
+}
+
+@supports (overflow: overlay) {
+  body {
+    overflow: overlay;
+    scrollbar-gutter: stable;
+  }
 }
 
 img {