add flexboxglue content box fix

packages/overlayscrollbars/src/lifecycles/lifecycleHub.ts

@@ -1,8 +1,7 @@
-import { TRBL, CacheValues, each, push, OptionsValidated, hasOwnProperty } from 'support';
+import { XY, TRBL, CacheValues, each, push, OptionsValidated, hasOwnProperty, isNumber, scrollLeft, scrollTop } from 'support';
 import { Options } from 'options';
 import { getEnvironment } from 'environment';
 import { StructureSetup } from 'setups/structureSetup';
-import { createStructureLifecycle } from 'lifecycles/structureLifecycle';
 import { createPaddingLifecycle } from 'lifecycles/paddingLifecycle';
 import { createOverflowLifecycle } from 'lifecycles/overflowLifecycle';
 import { createSizeObserver } from 'observers/sizeObserver';
@@ -47,6 +46,8 @@ export interface LifecycleHub {
   _setPadding(newPadding?: TRBL | null): void;
   _getPaddingStyle(): StyleObject;
   _setPaddingStyle(newPaddingStlye?: StyleObject | null): void;
+  _getViewportOverflowScroll(): XY<boolean>;
+  _setViewportOverflowScroll(newViewportOverflowScroll: XY<boolean>): void;
 }
 
 const getPropByPath = <T>(obj: any, path: string): T =>
@@ -60,6 +61,10 @@ const viewportPaddingStyleFallback: StyleObject = {
   marginBottom: 0,
   marginLeft: 0,
 };
+const viewportOverflowScrollFallback: XY<boolean> = {
+  x: false,
+  y: false,
+};
 const directionIsRTLCacheValuesFallback: CacheValues<boolean> = {
   _value: false,
   _previous: false,
@@ -74,7 +79,8 @@ const heightIntrinsicCacheValuesFallback: CacheValues<boolean> = {
 export const createLifecycleHub = (options: Options, structureSetup: StructureSetup): LifecycleHubInstance => {
   let padding = paddingFallback;
   let viewportPaddingStyle = viewportPaddingStyleFallback;
-  const { _host, _viewport, _content } = structureSetup._targetObj;
+  let viewportOverflowScroll = viewportOverflowScrollFallback;
+  const { _host, _viewport, _content, _contentArrange } = structureSetup._targetObj;
   const {
     _nativeScrollbarStyling,
     _flexboxGlue,
@@ -90,16 +96,24 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
       padding = newPadding || paddingFallback;
     },
     _getPaddingStyle: () => viewportPaddingStyle,
-    _setPaddingStyle(newPaddingStlye: StyleObject) {
+    _setPaddingStyle(newPaddingStlye) {
       viewportPaddingStyle = newPaddingStlye || viewportPaddingStyleFallback;
     },
+    _getViewportOverflowScroll: () => viewportOverflowScroll,
+    _setViewportOverflowScroll(newViewportOverflowScroll) {
+      viewportOverflowScroll = newViewportOverflowScroll || viewportOverflowScrollFallback;
+    },
   };
 
   // push(lifecycles, createStructureLifecycle(instance));
   push(lifecycles, createPaddingLifecycle(instance));
   push(lifecycles, createOverflowLifecycle(instance));
 
-  const runLifecycles = (updateHints?: Partial<LifecycleUpdateHints> | null, changedOptions?: OptionsValidated<Options> | null, force?: boolean) => {
+  const updateLifecycles = (
+    updateHints?: Partial<LifecycleUpdateHints> | null,
+    changedOptions?: OptionsValidated<Options> | null,
+    force?: boolean
+  ) => {
     let {
       _directionIsRTL,
       _heightIntrinsic,
@@ -116,6 +130,9 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
       _value: getPropByPath(options, path),
       _changed: force || getPropByPath(changedOptions, path) !== undefined,
     });
+    const adjustScrollOffset = _contentArrange || !_flexboxGlue;
+    const scrollOffsetX = adjustScrollOffset && scrollLeft(_viewport);
+    const scrollOffsetY = adjustScrollOffset && scrollTop(_viewport);
 
     each(lifecycles, (lifecycle) => {
       const {
@@ -142,24 +159,31 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
       _contentMutation = adaptiveContentMutation || _contentMutation;
       _paddingStyleChanged = adaptivePaddingStyleChanged || _paddingStyleChanged;
     });
+
+    if (isNumber(scrollOffsetX)) {
+      scrollLeft(_viewport, scrollOffsetX);
+    }
+    if (isNumber(scrollOffsetY)) {
+      scrollTop(_viewport, scrollOffsetY);
+    }
   };
 
   const onSizeChanged = (directionIsRTL?: CacheValues<boolean>) => {
     const sizeChanged = !directionIsRTL;
-    runLifecycles({
+    updateLifecycles({
       _directionIsRTL: directionIsRTL,
       _sizeChanged: sizeChanged,
     });
   };
   const onTrinsicChanged = (heightIntrinsic: CacheValues<boolean>) => {
-    runLifecycles({
+    updateLifecycles({
       _heightIntrinsic: heightIntrinsic,
     });
   };
   const onHostMutation = () => {
     // TODO: rAF only here because IE
     requestAnimationFrame(() => {
-      runLifecycles({
+      updateLifecycles({
         _hostMutation: true,
       });
     });
@@ -167,7 +191,7 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
   const onContentMutation = () => {
     // TODO: rAF only here because IE
     requestAnimationFrame(() => {
-      runLifecycles({
+      updateLifecycles({
         _contentMutation: true,
       });
     });
@@ -201,16 +225,16 @@ export const createLifecycleHub = (options: Options, structureSetup: StructureSe
       */
   });
 
-  const updateAll = (changedOptions?: OptionsValidated<Options> | null, force?: boolean) => {
+  const update = (changedOptions?: OptionsValidated<Options> | null, force?: boolean) => {
-    runLifecycles(null, changedOptions, force);
+    updateLifecycles(null, changedOptions, force);
   };
-  const envUpdateListener = updateAll.bind(null, null, true);
+  const envUpdateListener = update.bind(null, null, true);
   addEnvironmentListener(envUpdateListener);
 
   console.log('flexboxGlue', _flexboxGlue);
 
   return {
-    _update: updateAll,
+    _update: update,
     _destroy() {
       removeEnvironmentListener(envUpdateListener);
     },

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -7,14 +7,11 @@ import {
   scrollSize,
   CacheValues,
   equalWH,
-  scrollLeft,
-  scrollTop,
   addClass,
   removeClass,
   clientSize,
   offsetSize,
   getBoundingClientRect,
-  topRightBottomLeft,
 } from 'support';
 import { LifecycleHub, Lifecycle } from 'lifecycles/lifecycleHub';
 import { getEnvironment } from 'environment';
@@ -74,9 +71,6 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
   });
 
   const fixFlexboxGlue = (viewportOverflowState: ViewportOverflowState, heightIntrinsic: boolean) => {
-    const offsetLeft = scrollLeft(_viewport);
-    const offsetTop = scrollTop(_viewport);
-
     style(_viewport, {
       maxHeight: '',
     });
@@ -84,17 +78,14 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     if (heightIntrinsic) {
       const { _overflowScroll, _scrollbarsHideOffset } = viewportOverflowState;
       const hostBCR = getBoundingClientRect(_host);
-
+      const hostOffsetSize = offsetSize(_host);
-      // TODO: change to offset size - client size calculation.
+      const hostClientSize = clientSize(_host);
-      const border = topRightBottomLeft(_host, 'border', 'width');
+      const clientSizeWithoutRounding = hostClientSize.h + (hostBCR.height - hostOffsetSize.h);
 
       style(_viewport, {
-        maxHeight: hostBCR.height - (border.t + border.b) + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0),
+        maxHeight: clientSizeWithoutRounding + (_overflowScroll.x ? _scrollbarsHideOffset.x : 0),
       });
     }
-
-    scrollLeft(_viewport, offsetLeft);
-    scrollTop(_viewport, offsetTop);
   };
 
   const getViewportOverflowState = (showNativeOverlaidScrollbars: boolean, viewportStyleObj?: StyleObject): ViewportOverflowState => {