fix check for current scrollbarGutter property

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 `<dialog>` where when it showed it would create a layout shift. [#1967]
 - Fixed a bug in `<sl-tooltip>` 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

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);