From c529d1452c3c501fda862cd1abbeee0ad0475a35 Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Fri, 14 May 2021 16:46:05 +0200 Subject: [PATCH] optimization for fractional values --- .../src/lifecycles/overflowLifecycle.ts | 6 ++-- .../structureLifecycle/index.browser.ts | 30 +++++++++++-------- .../lifecycles/structureLifecycle/index.scss | 8 ++--- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts index 74825fb..ec608f9 100644 --- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts @@ -58,7 +58,7 @@ const sizeFraction = (elm: HTMLElement): WH => { h: viewportRect.height - viewportOffsetSize.h, }; }; -const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0; +const fractionalPixelRatioTollerance = () => (window.devicePixelRatio % 1 === 0 ? 0 : 1); const setAxisOverflowStyle = (horizontal: boolean, overflowAmount: number, behavior: OverflowBehavior, styleObj: StyleObject) => { const overflowKey: keyof StyleObject = horizontal ? 'overflowX' : 'overflowY'; const behaviorIsVisible = behavior.indexOf('visible') === 0; @@ -97,8 +97,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = ); const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache, OverflowAmountCacheContext>( ({ _viewportScrollSize, _viewportClientSize, _viewportSizeFraction }) => ({ - 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))), + w: max(0, round(max(0, _viewportScrollSize.w - _viewportClientSize.w) - (fractionalPixelRatioTollerance() || max(0, _viewportSizeFraction.w)))), + h: max(0, round(max(0, _viewportScrollSize.h - _viewportClientSize.h) - (fractionalPixelRatioTollerance() || 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 a2ea420..512f3e5 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -45,6 +45,7 @@ const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0; const getMetrics = (elm: HTMLElement): Metrics => { const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num; + const elmIsTarget = elm === target; const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement); const comparisonBCR = getBoundingClientRect(elm!); const comparisonPercentBCR = getBoundingClientRect(elm!.querySelector('.percent')!); @@ -60,10 +61,15 @@ const getMetrics = (elm: HTMLElement): Metrics => { const hasOverflow = (elm: HTMLElement) => { const measure = scrollMeasure(elm); - return { - x: measure.width > 0, - y: measure.height > 0, - }; + return elmIsTarget + ? { + x: osInstance.state()._overflowAmount.w > 0, + y: osInstance.state()._overflowAmount.h > 0, + } + : { + x: measure.width > 0, + y: measure.height > 0, + }; }; return { @@ -75,8 +81,8 @@ const getMetrics = (elm: HTMLElement): Metrics => { 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!), + scroll: elmIsTarget ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!), + hasOverflow: elmIsTarget ? hasOverflow(targetViewport!) : hasOverflow(comparison!), percentElm: { width: rounding(comparisonPercentBCR.width).toFixed(fixedDigits), height: rounding(comparisonPercentBCR.height).toFixed(fixedDigits), @@ -112,7 +118,7 @@ msie11 && addClass(document.body, 'msie11'); const useContentElement = false; const fixedDigits = msie11 ? 1 : 3; const fixedDigitsOffset = 3; -const fractionalPixelRatioTollerance = 2; +const fractionalPixelRatioTollerance = 2; // nss=true && any overlaid ? 2 : 1; const startBtn: HTMLButtonElement | null = document.querySelector('#start'); const target: HTMLElement | null = document.querySelector('#target'); @@ -339,7 +345,7 @@ const iterateMinMax = async (afterEach?: () => any) => { const overflowTest = async () => { const additiveOverflow = () => { if (isFractionalPixelRatio()) { - return 1 + Math.max(1, Math.round(window.devicePixelRatio)); + return 1; } return 1; }; @@ -419,15 +425,15 @@ const overflowTest = async () => { await waitForOrFailTest(() => { if (width) { - should.ok(overflowAmountCheck.width >= addOverflow, 'Correct smallest possible overflow width.'); + should.ok(overflowAmountCheck.width >= addOverflow, 'Correct smallest possible overflow width. (?)'); } else { - should.equal(overflowAmountCheck.width, 0, 'Correct smallest possible overflow width.'); + should.equal(overflowAmountCheck.width, 0, 'Correct smallest possible overflow width. (0)'); } if (height) { - should.ok(overflowAmountCheck.height >= addOverflow, 'Correct smallest possible overflow height.'); + should.ok(overflowAmountCheck.height >= addOverflow, 'Correct smallest possible overflow height. (?)'); } else { - should.equal(overflowAmountCheck.height, 0, 'Correct smallest possible overflow height.'); + should.equal(overflowAmountCheck.height, 0, 'Correct smallest possible overflow height. (0)'); } }); diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss index aa048d6..623aac1 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss @@ -105,10 +105,10 @@ body { content: ''; position: absolute; display: block; - top: -10px; - right: -10px; - bottom: -10px; - left: -10px; + top: -11px; + right: -11px; + bottom: -11px; + left: -11px; background: green; z-index: -1; opacity: 0.5;