fix: use scrollbar-gutter to prevent layout shift without always showing scrollbar
Build & Deploy / build-and-deploy (push) Successful in 45s
Build & Deploy / build-and-deploy (push) Successful in 45s
Replaces overflow-y: scroll with scrollbar-gutter: stable on html. This reserves the scrollbar gutter space in the layout at all times, so the content width never changes when a scrollbar appears/disappears. The scrollbar itself only shows when content overflows (as desired). Works on all modern browsers (Chrome 94+, Firefox 97+, Safari 15.4+).
This commit is contained in:
@@ -61,10 +61,13 @@ body {
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
line-height: 1.6;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--phosphor);
|
||||
text-decoration: none;
|
||||
|
||||
Reference in New Issue
Block a user