From 35585cc204deb48399088e2071f887a5281b7c3a Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Mon, 26 Feb 2024 12:54:58 -0500 Subject: [PATCH] add notes about browser support --- src/internal/scroll.ts | 2 +- src/themes/_utility.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/internal/scroll.ts b/src/internal/scroll.ts index dddfa778..85939ed5 100644 --- a/src/internal/scroll.ts +++ b/src/internal/scroll.ts @@ -31,8 +31,8 @@ export function lockBodyScrolling(lockingEl: HTMLElement) { // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden. if (!document.documentElement.classList.contains('sl-scroll-lock')) { + /** 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 - document.documentElement.classList.add('sl-scroll-lock'); document.documentElement.style.setProperty('--sl-scroll-lock-size', `${scrollbarWidth}px`); } diff --git a/src/themes/_utility.css b/src/themes/_utility.css index 6d75bc76..f0e2eefc 100644 --- a/src/themes/_utility.css +++ b/src/themes/_utility.css @@ -11,6 +11,7 @@ } } +/** This can go away once Safari has scrollbar-gutter support. */ @supports not (scrollbar-gutter: stable) { .sl-scroll-lock body { padding-right: var(--sl-scroll-lock-size) !important;