From e95ad58437559ad20626cdf324127c3a55a8ce2a Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Thu, 11 Apr 2024 13:19:55 -0400 Subject: [PATCH] fix check for current scrollbarGutter property --- docs/pages/resources/changelog.md | 3 ++- src/internal/scroll.ts | 10 ++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index 58fd1ed0..e1275487 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -14,6 +14,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti ## Next +- Fixed a bug in `` where when it showed it would create a layout shift. [#1967] - Fixed a bug in `` that allowed unwanted text properties to leak in [#1947] ## 2.15.0 @@ -1742,4 +1743,4 @@ The following pages demonstrate why this change was necessary. ## 2.0.0-beta.1 -- Initial release +- Initial release \ No newline at end of file diff --git a/src/internal/scroll.ts b/src/internal/scroll.ts index 66ebe9dd..e008c094 100644 --- a/src/internal/scroll.ts +++ b/src/internal/scroll.ts @@ -34,9 +34,15 @@ export function lockBodyScrolling(lockingEl: HTMLElement) { /** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */ const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `sl-scroll-lock` class is applied - let scrollbarGutterProperty = 'stable'; + let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter + + // default is auto, unsupported browsers is "undefined" + if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") { + scrollbarGutterProperty = "stable" + } + if (scrollbarWidth <= 0) { - // if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. + // if there's no scrollbar, just set it to "revert" so whatever the user has set gets used. This is useful is the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing. scrollbarGutterProperty = 'revert'; } document.documentElement.style.setProperty('--sl-scroll-lock-gutter', scrollbarGutterProperty);