From 35626560e654faf875b368fac2c1ed8e74c8aa15 Mon Sep 17 00:00:00 2001 From: Richard Scarrott Date: Fri, 23 Aug 2024 16:02:18 +0100 Subject: [PATCH 1/2] Prevent iOS <= 14 from blowing up when reading scroll margin or padding --- src/use-snap-carousel.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/use-snap-carousel.tsx b/src/use-snap-carousel.tsx index 0e73049..18f22d8 100644 --- a/src/use-snap-carousel.tsx +++ b/src/use-snap-carousel.tsx @@ -258,7 +258,8 @@ const _getOffsetRect = (el: Element) => { // https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding const getScrollPaddingUsedValue = (el: HTMLElement, pos: 'left' | 'top') => { const style = window.getComputedStyle(el); - const scrollPadding = style.getPropertyValue(`scroll-padding-${pos}`); + const scrollPadding = + style.getPropertyValue(`scroll-padding-${pos}`) || '0px'; if (scrollPadding === 'auto') { return 0; } @@ -284,9 +285,10 @@ const getScrollPaddingUsedValue = (el: HTMLElement, pos: 'left' | 'top') => { // https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin const getScrollMarginUsedValue = (el: HTMLElement, pos: 'left' | 'top') => { const style = window.getComputedStyle(el); - const scrollMargin = style.getPropertyValue(`scroll-margin-${pos}`); + const scrollMargin = style.getPropertyValue(`scroll-margin-${pos}`) || '0px'; // https://developer.mozilla.org/en-US/docs/Web/CSS/length // https://www.w3.org/TR/css3-values/#length-value + // alert(scrollMargin); const invalidMsg = `Unsupported scroll margin value, expected value, received ${scrollMargin}`; assert(scrollMargin.endsWith('px'), invalidMsg); // Even scroll-margin: 0 should return "0px" const value = parseInt(scrollMargin); From 9477ef36e19ade2de24453b205d1b6de52d9606f Mon Sep 17 00:00:00 2001 From: Richard Scarrott Date: Fri, 23 Aug 2024 16:04:16 +0100 Subject: [PATCH 2/2] Fix up --- src/use-snap-carousel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/use-snap-carousel.tsx b/src/use-snap-carousel.tsx index 18f22d8..464b179 100644 --- a/src/use-snap-carousel.tsx +++ b/src/use-snap-carousel.tsx @@ -288,7 +288,6 @@ const getScrollMarginUsedValue = (el: HTMLElement, pos: 'left' | 'top') => { const scrollMargin = style.getPropertyValue(`scroll-margin-${pos}`) || '0px'; // https://developer.mozilla.org/en-US/docs/Web/CSS/length // https://www.w3.org/TR/css3-values/#length-value - // alert(scrollMargin); const invalidMsg = `Unsupported scroll margin value, expected value, received ${scrollMargin}`; assert(scrollMargin.endsWith('px'), invalidMsg); // Even scroll-margin: 0 should return "0px" const value = parseInt(scrollMargin);