mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-05-27 14:24:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

optimization for fractional values

Browse Source
This commit is contained in:
Rene Haas
2021-05-14 16:46:05 +02:00
parent d1273f86c4
commit c529d1452c
3 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts
+3 -3
View File
@@ -58,7 +58,7 @@ const sizeFraction = (elm: HTMLElement): WH<number> => {
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<WH<number>, 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
);
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+18 -12
View File
@@ -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)');
}
});
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+4 -4
View File
@@ -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;