order is matter

packages/overlayscrollbars/src/observers/sizeObserver.ts

@@ -7,7 +7,6 @@ import {
   scrollLeft,
   scrollTop,
   runEachAndClear,
-  prependChildren,
   removeElements,
   on,
   addClass,
@@ -18,6 +17,7 @@ import {
   removeClass,
   isObject,
   stopPropagation,
+  appendChildren,
 } from 'support';
 import { getEnvironment } from 'environment';
 import {
@@ -211,7 +211,7 @@ export const createSizeObserver = (
         );
       }
 
-      prependChildren(target, sizeObserver);
+      appendChildren(target, sizeObserver);
     },
   ];
 };

packages/overlayscrollbars/src/observers/trinsicObserver.ts

@@ -4,11 +4,11 @@ import {
   createDiv,
   offsetSize,
   runEachAndClear,
-  prependChildren,
   removeElements,
   createCache,
   push,
   IntersectionObserverConstructor,
+  appendChildren,
 } from 'support';
 import { createSizeObserver } from 'observers/sizeObserver';
 import { classNameTrinsicObserver } from 'classnames';
@@ -93,7 +93,7 @@ export const createTrinsicObserver = (
         onSizeChanged();
       }
 
-      prependChildren(target, trinsicObserver);
+      appendChildren(target, trinsicObserver);
     },
     () => {
       if (intersectionObserverInstance) {

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts

@@ -244,6 +244,7 @@ export const createStructureSetupObservers = (
       destroyHostMutationObserver();
     },
     () => {
+      // order is matter!
       appendSizeObserver();
       appendTrinsicObserver();
     },

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts

@@ -97,8 +97,8 @@ export const createStructureSetup = (
     addEvent('u', listener);
   };
   structureSetupState._appendElements = () => {
-    appendStructureElements();
     appendObserverElements();
+    appendStructureElements();
   };
   structureSetupState._elements = elements;
 

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts

@@ -788,19 +788,22 @@ const start = async () => {
   setTestResult(null);
 
   target?.removeAttribute('style');
-
-  await overflowTest();
-  await overflowTest({ overflow: { x: 'visible', y: 'visible' } });
-  await overflowTest({ overflow: { x: 'visible-scroll', y: 'visible-hidden' } });
-  await overflowTest({ overflow: { x: 'visible-hidden', y: 'hidden' } });
-  await overflowTest({ overflow: { x: 'visible', y: 'visible-scroll' } });
-  await overflowTest({ overflow: { x: 'scroll', y: 'visible-scroll' } });
-  await overflowTest({ overflow: { x: 'hidden', y: 'scroll' } });
-  await overflowTest({ overflow: { x: 'scroll', y: 'hidden' } });
-  await overflowTest({ overflow: { x: 'visible', y: 'scroll' } });
-  await overflowTest({ overflow: { x: 'scroll', y: 'visible' } });
-  await overflowTest({ overflow: { x: 'visible', y: 'hidden' } });
-  await overflowTest({ overflow: { x: 'hidden', y: 'visible' } });
+  try {
+    await overflowTest();
+    await overflowTest({ overflow: { x: 'visible', y: 'visible' } });
+    await overflowTest({ overflow: { x: 'visible-scroll', y: 'visible-hidden' } });
+    await overflowTest({ overflow: { x: 'visible-hidden', y: 'hidden' } });
+    await overflowTest({ overflow: { x: 'visible', y: 'visible-scroll' } });
+    await overflowTest({ overflow: { x: 'scroll', y: 'visible-scroll' } });
+    await overflowTest({ overflow: { x: 'hidden', y: 'scroll' } });
+    await overflowTest({ overflow: { x: 'scroll', y: 'hidden' } });
+    await overflowTest({ overflow: { x: 'visible', y: 'scroll' } });
+    await overflowTest({ overflow: { x: 'scroll', y: 'visible' } });
+    await overflowTest({ overflow: { x: 'visible', y: 'hidden' } });
+    await overflowTest({ overflow: { x: 'hidden', y: 'visible' } });
+  } catch (e) {
+    console.log(e);
+  }
 
   setTestResult(true);
 };