more optimizations and size observer improvement

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -87,11 +87,11 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
   const { _structureSetup, _doViewportArrange, _getLifecycleCommunication, _setLifecycleCommunication } = lifecycleHub;
   const { _host, _viewport, _viewportArrange } = _structureSetup._targetObj;
   const { _update: updateViewportSizeFraction, _current: getCurrentViewportSizeFraction } = createCache<WH<number>>(
-    () => sizeFraction(_viewport),
+    sizeFraction.bind(0, _viewport),
     whCacheOptions
   );
   const { _update: updateViewportScrollSizeCache, _current: getCurrentViewportScrollSizeCache } = createCache<WH<number>>(
-    () => scrollSize(_viewport),
+    scrollSize.bind(0, _viewport),
     whCacheOptions
   );
   const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>(
@@ -119,10 +119,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
       const hostClientSize = clientSize(_host);
       // padding subtraction is only needed if padding is absolute or if viewport is content-box
       const paddingVertical = paddingAbsolute || style(_viewport, 'boxSizing') === 'content-box' ? padding.b + padding.t : 0;
-      const fractionalcleintHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
+      const fractionalClientHeight = hostClientSize.h + (abs(hostSizeFraction.h) < 1 ? hostSizeFraction.h : 0);
 
       style(_viewport, {
-        height: fractionalcleintHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
+        height: fractionalClientHeight + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0) - paddingVertical,
       });
     }
   };

packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts

@@ -1,4 +1,4 @@
-import { createCache, topRightBottomLeft, equalTRBL, style } from 'support';
+import { createCache, topRightBottomLeft, equalTRBL, style, TRBL } from 'support';
 import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
 import { StyleObject } from 'typings';
 import { getEnvironment } from 'environment';
@@ -11,7 +11,7 @@ import { getEnvironment } from 'environment';
 export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle => {
   const { _structureSetup, _setLifecycleCommunication } = lifecycleHub;
   const { _host, _padding, _viewport } = _structureSetup._targetObj;
-  const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache(() => topRightBottomLeft(_host, 'padding'), {
+  const { _update: updatePaddingCache, _current: currentPaddingCache } = createCache<TRBL>(topRightBottomLeft.bind(0, _host, 'padding'), {
     _equal: equalTRBL,
     _initialValue: topRightBottomLeft(),
   });

packages/overlayscrollbars/src/observers/sizeObserver.ts

@@ -136,7 +136,7 @@ export const createSizeObserver = (
     const expandElement = observerElementChildrenRoot.firstChild as HTMLElement;
     const expandElementChild = expandElement?.firstChild as HTMLElement;
 
-    let cacheSize = offsetSize(listenerElement);
+    let cacheSize = offsetSize(observerElementChildrenRoot);
     let currSize = cacheSize;
     let isDirty = false;
     let rAFId: number;
@@ -155,7 +155,7 @@ export const createSizeObserver = (
       }
     };
     const onScroll = (scrollEvent?: Event | false) => {
-      currSize = offsetSize(listenerElement);
+      currSize = offsetSize(observerElementChildrenRoot);
       isDirty = !scrollEvent || !equalWH(currSize, cacheSize);
 
       if (scrollEvent) {
@@ -186,12 +186,13 @@ export const createSizeObserver = (
   }
 
   if (observeDirectionChange) {
-    directionIsRTLCache = createCache(() => directionIsRTL(sizeObserver));
+    directionIsRTLCache = createCache(directionIsRTL.bind(0, sizeObserver));
     const { _update: updateDirectionIsRTLCache } = directionIsRTLCache;
     push(
       offListeners,
       on(sizeObserver, scrollEventName, (event: Event) => {
         const directionIsRTLCacheValues = updateDirectionIsRTLCache();
+        console.log;
         const { _value, _changed } = directionIsRTLCacheValues;
         if (_changed) {
           removeClass(listenerElement, 'ltr rtl');

packages/overlayscrollbars/src/styles/sizeobserver.scss

@@ -1,5 +1,5 @@
-$scrollbars-cushion: 100px; // assume no scrollbar takes more than 100px space
+$inflate-margin: 133px;
-$inflate-margin: 100px;
+$shrink-scale: 0.1;
 
 .os-size-observer,
 .os-size-observer-listener {
@@ -34,24 +34,16 @@ $inflate-margin: 100px;
   right: 0;
   bottom: 0;
   left: 0;
-  transform: scale(0.1);
+  transform: scale($shrink-scale);
 
-  &::before,
+  &::before {
-  &::after {
     content: '';
     flex: none;
     box-sizing: inherit;
-  }
-  &::before {
     padding: 10px;
     width: 10px;
     height: 10px;
   }
-  &::after {
-    content: '';
-    padding: inherit;
-    border: inherit;
-  }
 }
 
 .os-size-observer-appear {
@@ -63,7 +55,10 @@ $inflate-margin: 100px;
   box-sizing: border-box;
   position: relative;
   flex: auto;
+  padding: inherit;
+  border: inherit;
   margin: -$inflate-margin;
+  transform: scale(1 / $shrink-scale);
 
   &.ltr {
     margin-right: -$inflate-margin * 2;
@@ -74,16 +69,26 @@ $inflate-margin: 100px;
     margin-right: 0;
   }
 
+  &:empty::before {
+    content: '';
+    width: 100%;
+    height: 100%;
+  }
+
+  &:empty::before,
   & > .os-size-observer-listener-item {
-    top: -$scrollbars-cushion;
+    display: block;
-    right: -$scrollbars-cushion;
+    position: relative;
-    bottom: -$scrollbars-cushion;
+    padding: inherit;
-    left: -$scrollbars-cushion;
+    border: inherit;
+    box-sizing: content-box;
+    flex: auto;
   }
 }
 
 .os-size-observer-listener-scroll {
-  box-sizing: content-box;
+  box-sizing: border-box;
+  display: flex;
 }
 
 .os-size-observer-listener-item {

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

@@ -108,18 +108,26 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
         );
       }
 
-      if (dimensions && (offsetSizeChanged || contentSizeChanged || dirChanged || boxSizingChanged)) {
+      if (dirChanged) {
         await waitForOrFailTest(() => {
-          if (offsetSizeChanged || contentSizeChanged || boxSizingChanged) {
+          const expectedCacheValue = newDir === 'rtl';
-            should.equal(sizeIterations, currSizeIterations + 1, 'Size change was detected correctly.');
+          should.equal(directionIterations, currDirectionIterations + 1, 'Direction change was detected correctly.');
-          }
+          should.equal(sizeObserver._getCurrentCacheValues()._directionIsRTL._value, expectedCacheValue, 'Direction cache value is correct.');
-          if (dirChanged) {
-            const expectedCacheValue = newDir === 'rtl';
-            should.equal(directionIterations, currDirectionIterations + 1, 'Direction change was detected correctly.');
-            should.equal(sizeObserver._getCurrentCacheValues()._directionIsRTL._value, expectedCacheValue, 'Direction cache value is correct.');
-          }
         });
       }
+
+      if (boxSizingChanged) {
+        await waitForOrFailTest(() => {
+          should.equal(sizeIterations, currSizeIterations + 1, 'BoxSizing change was detected correctly.');
+        });
+      }
+
+      if (dimensions && (offsetSizeChanged || contentSizeChanged)) {
+        await waitForOrFailTest(() => {
+          should.equal(sizeIterations, currSizeIterations + 1, 'Size change was detected correctly.');
+        });
+      }
+
       if (!dimensions) {
         await timeout(100);
       }