fix(web): reduce page jitter on browsers that support overlay scrollbar (#21850)

kecrily · web-flow · commit 9eb9cf515316 · 2022-12-04T08:56:10.000Z
Reduce jitter caused by the presence or absence of scrollbars in page switching --- Ref [scrollbar-gutter | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) https://user-images.githubusercontent.com/45708948/165972251-7d5a5017-f76d-4ba2-9106-a224b3ee521f.mp4
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -222,6 +222,13 @@ body {
   overflow-wrap: break-word;
 }
 
+@supports (overflow: overlay) {
+  body {
+    overflow: overlay;
+    scrollbar-gutter: stable;
+  }
+}
+
 img {
   border-radius: 3px;
 }

Original file line number	Diff line number	Diff line change
`@@ -222,6 +222,13 @@ body {`
`222`	`222`	`overflow-wrap: break-word;`
`223`	`223`	`}`
`224`	`224`
	`225`	`+@supports (overflow: overlay) {`
	`226`	`+ body {`
	`227`	`+ overflow: overlay;`
	`228`	`+ scrollbar-gutter: stable;`
	`229`	`+ }`
	`230`	`+}`
	`231`	`+`
`225`	`232`	`img {`
`226`	`233`	`border-radius: 3px;`
`227`	`234`	`}`