From 4b81339ca0895649d4f174f1623136d86d4f5c42 Mon Sep 17 00:00:00 2001
From: Rene Haas <hren@xxxlgroup.com>
Date: Fri, 14 May 2021 10:26:55 +0200
Subject: [PATCH] improve overflow amount

---
 .../src/lifecycles/overflowLifecycle.ts       |  4 +--
 .../structureLifecycle/index.browser.ts       | 31 ++++++++++---------
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
index 5f0a4cc..ec3b706 100644
--- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
@@ -96,8 +96,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
   );
   const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>(
     ({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({
-      w: round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w)),
-      h: round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h)),
+      w: max(0, round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - max(0, _viewportSizeFraction.w))),
+      h: max(0, round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - max(0, _viewportSizeFraction.h))),
     }),
     whCacheOptions
   );
diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
index c7d951f..940090c 100644
--- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
@@ -41,7 +41,10 @@ interface CheckComparisonObj {
   metrics: Metrics;
 }
 
+const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
+
 const getMetrics = (elm: HTMLElement): Metrics => {
+  const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num;
   const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement);
   const comparisonBCR = getBoundingClientRect(elm!);
   const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!);
@@ -50,8 +53,8 @@ const getMetrics = (elm: HTMLElement): Metrics => {
 
   const scrollMeasure = (elm: HTMLElement) => {
     return {
-      width: elm!.scrollWidth - elm!.clientWidth,
-      height: elm!.scrollHeight - elm!.clientHeight,
+      width: Math.max(0, elm!.scrollWidth - elm!.clientWidth),
+      height: Math.max(0, elm!.scrollHeight - elm!.clientHeight),
     };
   };
 
@@ -65,22 +68,22 @@ const getMetrics = (elm: HTMLElement): Metrics => {
 
   return {
     offset: {
-      left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
-      top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
+      left: rounding(comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
+      top: rounding(comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
     },
     size: {
-      width: comparisonBCR.width.toFixed(fixedDigits),
-      height: comparisonBCR.height.toFixed(fixedDigits),
+      width: rounding(comparisonBCR.width).toFixed(fixedDigits),
+      height: rounding(comparisonBCR.height).toFixed(fixedDigits),
     },
     scroll: elm === target ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!),
     hasOverflow: elm === target ? hasOverflow(targetViewport!) : hasOverflow(comparison!),
     percentElm: {
-      width: comparisonPercentBCR.width.toFixed(fixedDigits),
-      height: comparisonPercentBCR.height.toFixed(fixedDigits),
+      width: rounding(comparisonPercentBCR.width).toFixed(fixedDigits),
+      height: rounding(comparisonPercentBCR.height).toFixed(fixedDigits),
     },
     endElm: {
-      width: comparisonEndBCR.width.toFixed(fixedDigits),
-      height: comparisonEndBCR.height.toFixed(fixedDigits),
+      width: rounding(comparisonEndBCR.width).toFixed(fixedDigits),
+      height: rounding(comparisonEndBCR.height).toFixed(fixedDigits),
     },
   };
 };
@@ -92,8 +95,6 @@ const metricsDimensionsEqual = (a: Metrics, b: Metrics) => {
   return JSON.stringify(aDimensions) === JSON.stringify(bDimensions);
 };
 
-const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
-
 const plusMinusArr = (original: number, plusMinus: number) => {
   return [original, original + plusMinus, original - plusMinus];
 };
@@ -362,9 +363,9 @@ const overflowTest = async () => {
       };
       const { paddingRight, paddingBottom } = style(comparison, ['paddingRight', 'paddingBottom']);
       const comparisonContentBox = contentBox(comparison);
-      const widthOverflow = width ? addOverflow : 0;
-      const heightOverflow = height ? addOverflow : 0;
-      const styleObj = { width: comparisonContentBox.w + widthOverflow, height: comparisonContentBox.h + heightOverflow };
+      const widthOverflow = width ? comparisonContentBox.w + addOverflow : 0;
+      const heightOverflow = height ? comparisonContentBox.h + addOverflow : 0;
+      const styleObj = { width: widthOverflow, height: heightOverflow };
 
       style(comparisonResize, styleObj);