improve sizeobserver logic for modern browsers

packages/overlayscrollbars/src/observers/sizeObserver.ts

@@ -149,7 +149,13 @@ export const createSizeObserver = (
   // appearCallback is always needed on scroll-observer strategy to reset it
   if (appearCallback) {
     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);

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts

@@ -3,7 +3,7 @@ import './index.scss';
 import should from 'should';
 import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select';
 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';
 
@@ -65,7 +65,8 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
       const offsetSizeChanged = currOffsetSize.w !== newOffsetSize.w || currOffsetSize.h !== newOffsetSize.h;
       const contentSizeChanged = currContentSize.w !== newContentSize.w || currContentSize.h !== newContentSize.h;
       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;
 
       // no overflow if not needed