From edfdcff0246b7a72c909578b682fa4eab691caec Mon Sep 17 00:00:00 2001
From: Rene <king-sora@hotmail.de>
Date: Wed, 27 Jul 2022 21:18:38 +0200
Subject: [PATCH] order is matter

---
 .../src/observers/sizeObserver.ts             |  4 +--
 .../src/observers/trinsicObserver.ts          |  4 +--
 .../structureSetup.observers.ts               |  1 +
 .../setups/structureSetup/structureSetup.ts   |  2 +-
 .../structureSetup/update/index.browser.ts    | 29 ++++++++++---------
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/overlayscrollbars/src/observers/sizeObserver.ts b/packages/overlayscrollbars/src/observers/sizeObserver.ts
index 2c185c6..f309b1b 100644
--- a/packages/overlayscrollbars/src/observers/sizeObserver.ts
+++ b/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);
     },
   ];
 };
diff --git a/packages/overlayscrollbars/src/observers/trinsicObserver.ts b/packages/overlayscrollbars/src/observers/trinsicObserver.ts
index 7b065f5..98da31a 100644
--- a/packages/overlayscrollbars/src/observers/trinsicObserver.ts
+++ b/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) {
diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts
index aae0b5b..9df134b 100644
--- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts
+++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts
@@ -244,6 +244,7 @@ export const createStructureSetupObservers = (
       destroyHostMutationObserver();
     },
     () => {
+      // order is matter!
       appendSizeObserver();
       appendTrinsicObserver();
     },
diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
index 271d65b..ecae24c 100644
--- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
+++ b/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;
 
diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts
index d27c3e8..0f98cda 100644
--- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts
+++ b/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);
 };