mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-21 14:10:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve sizeobserver logic for modern browsers

Browse Source
This commit is contained in:
Rene
2021-02-06 01:17:19 +01:00
parent 6f590b2cc4
commit c7f6be778d
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/src/observers/sizeObserver.ts
+7 -1
View File
@@ -149,7 +149,13 @@ export const createSizeObserver = (
// appearCallback is always needed on scroll-observer strategy to reset it // appearCallback is always needed on scroll-observer strategy to reset it
if (appearCallback) { if (appearCallback) {
addClass(sizeObserver, classNameSizeObserverAppear); addClass(sizeObserver, classNameSizeObserverAppear);
push(offListeners, on(sizeObserver, animationStartEventName, appearCallback)); push(
offListeners,
on(sizeObserver, animationStartEventName, appearCallback, {
// Fire only once for "CSS is ready" event
_once: !!ResizeObserverConstructor,
})
);
} }
prependChildren(target, sizeObserver); prependChildren(target, sizeObserver);
packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts
+3 -2
View File
@@ -3,7 +3,7 @@ import './index.scss';
import should from 'should'; import should from 'should';
import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select'; import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select';
import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
import { hasDimensions, offsetSize, WH, style } from 'support'; import { hasDimensions, offsetSize, WH, style, ResizeObserverConstructor } from 'support';
import { createSizeObserver } from 'observers/sizeObserver'; import { createSizeObserver } from 'observers/sizeObserver';
@@ -65,7 +65,8 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
const offsetSizeChanged = currOffsetSize.w !== newOffsetSize.w || currOffsetSize.h !== newOffsetSize.h; const offsetSizeChanged = currOffsetSize.w !== newOffsetSize.w || currOffsetSize.h !== newOffsetSize.h;
const contentSizeChanged = currContentSize.w !== newContentSize.w || currContentSize.h !== newContentSize.h; const contentSizeChanged = currContentSize.w !== newContentSize.w || currContentSize.h !== newContentSize.h;
const dirChanged = currDir !== newDir; const dirChanged = currDir !== newDir;
const dimensions = hasDimensions(targetElm as HTMLElement); // ResizeObserver Polyfill doesn't react on display: none, so make an exception there
const dimensions = ResizeObserverConstructor ? true : hasDimensions(targetElm as HTMLElement);
const observerElm = targetElm?.firstElementChild as HTMLElement; const observerElm = targetElm?.firstElementChild as HTMLElement;
// no overflow if not needed // no overflow if not needed