diff --git a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts index c1a7274..c815122 100644 --- a/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts @@ -266,7 +266,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = const verticalPaddingValue = viewportPaddingStyle.paddingBottom as number; // horizontal - viewportStyleObj.maxWidth = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`; + viewportStyleObj.width = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`; viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue; // vertical @@ -420,7 +420,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = marginRight: 0, marginBottom: 0, marginLeft: 0, - maxWidth: '', + width: '', overflowY: '', overflowX: '', }; @@ -433,12 +433,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle = fixFlexboxGlue(viewportOverflowState, !!heightIntrinsic); } - // TODO: enlargen viewport if div too small for firefox scrollbar hiding behavior // TODO: hide host overflow if scroll x or y and no padding element there // TODO: Test without content // TODO: Test without padding // TODO: overflow: visible on padding / host if overflow visible on both axis - // TODO: change lifecyclehub communication to single object & assign style(_viewport, viewportStyle); diff --git a/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts b/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts index d683b90..0305125 100644 --- a/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts +++ b/packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts @@ -45,7 +45,7 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => right: 0, bottom: 0, left: 0, - maxWidth: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '', + width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '', }; const viewportStyle: StyleObject = { paddingTop: paddingRelative ? padding!.t : 0, diff --git a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss index 8c263e8..23d6083 100644 --- a/packages/overlayscrollbars/src/styles/overlayscrollbars.scss +++ b/packages/overlayscrollbars/src/styles/overlayscrollbars.scss @@ -89,7 +89,6 @@ padding: 0; margin: 0; border: none; - max-width: 100%; z-index: 0; } diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index db76d23..c7d951f 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -100,7 +100,7 @@ const plusMinusArr = (original: number, plusMinus: number) => { // @ts-ignore const msie11 = !!window.MSInputMethodContext && !!document.documentMode; -const msedge = window.navigator.userAgent.indexOf('Edge') > -1; +const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1; msie11 && addClass(document.body, 'msie11'); @@ -234,10 +234,10 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => { should.equal(osInstance.state()._overflowAmount.w, comparisonMetrics.scroll.width, 'Overflow amount width equality.'); should.equal(osInstance.state()._overflowAmount.h, comparisonMetrics.scroll.height, 'Overflow amount height equality.'); - } - //should.equal(targetMetrics.hasOverflow.x, comparisonMetrics.hasOverflow.x, 'Has overflow x equality.'); - //should.equal(targetMetrics.hasOverflow.y, comparisonMetrics.hasOverflow.y, 'Has overflow y equality.'); + should.equal(targetMetrics.hasOverflow.x, comparisonMetrics.hasOverflow.x, 'Has overflow x equality.'); + should.equal(targetMetrics.hasOverflow.y, comparisonMetrics.hasOverflow.y, 'Has overflow y equality.'); + } if (targetMetrics.hasOverflow.x) { should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.'); @@ -262,6 +262,11 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => { should.equal(targetMetrics.endElm.height, comparisonMetrics.endElm.height, 'End Elements height equality.'); await timeout(1); + + // steady pace for ie11 or it will freeze progressively + if (msie11) { + await timeout(25); + } }); }; @@ -396,17 +401,19 @@ const overflowTest = async () => { height: comparison!.scrollHeight - comparison!.clientHeight, }; - if (width) { - should.ok(overflowAmountCheck.width >= addOverflow, 'Correct smallest possible overflow width.'); - } else { - should.equal(overflowAmountCheck.width, 0, 'Correct smallest possible overflow width.'); - } + await waitForOrFailTest(() => { + if (width) { + should.ok(overflowAmountCheck.width >= addOverflow, 'Correct smallest possible overflow width.'); + } else { + should.equal(overflowAmountCheck.width, 0, 'Correct smallest possible overflow width.'); + } - if (height) { - should.ok(overflowAmountCheck.height >= addOverflow, 'Correct smallest possible overflow height.'); - } else { - should.equal(overflowAmountCheck.height, 0, 'Correct smallest possible overflow height.'); - } + if (height) { + should.ok(overflowAmountCheck.height >= addOverflow, 'Correct smallest possible overflow height.'); + } else { + should.equal(overflowAmountCheck.height, 0, 'Correct smallest possible overflow height.'); + } + }); style(targetResize, styleObj); @@ -458,13 +465,11 @@ const overflowTest = async () => { await iterateHeight(async () => { await iterateWidth(async () => { await iterateBorder(async () => { - // assume this part isn't critical for IE11, to boost test speed + // assume this part isn't critical /* - if (!msie11) { - await iterateFloat(async () => { - await iterateMargin(); - }); - } + await iterateFloat(async () => { + await iterateMargin(); + }); */ await iteratePadding(async () => { diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss index 2649609..aa048d6 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss @@ -234,10 +234,10 @@ body { } .minMaxFixed > .container { - min-height: 180px; - min-width: 180px; - max-height: 420px; - max-width: 420px; + min-height: 180.5px; + min-width: 180.5px; + max-height: 420.3px; + max-width: 420.8px; } .minMaxNone > .container { @@ -307,6 +307,7 @@ body { .os-environment, .os-viewport { scrollbar-width: none !important; + -ms-overflow-style: none !important; } }