use requestAnimationFrame

Author: Parvinmh

src/packages/tour/components/HelperLayer.ts

@@ -1,7 +1,7 @@
 import { style } from "../../../util/style";
 import dom, { State } from "../../dom";
 import { helperLayerClassName } from "../classNames";
-import { waitAndSetPositionRelativeToStep } from "../position";
+import { setPositionRelativeToStep } from "../position";
 import { TourStep } from "../steps";
 
 const { div } = dom.tags;
@@ -64,8 +64,7 @@ export const HelperLayer = ({
     // set the new position if the step or refreshes change
     if (!step.val || refreshes.val === undefined) return;
 
-    
-    waitAndSetPositionRelativeToStep(
+    setPositionRelativeToStep(
       targetElement,
       helperLayer,
       step.val,

src/packages/tour/position.ts

@@ -11,44 +11,12 @@ export const setPositionRelativeToStep = (
   step: TourStep,
   padding: number
 ) => {
-  setPositionRelativeTo(
-    relativeElement,
-    element,
-    step.element as HTMLElement,
-    step.position === "floating" ? 0 : padding
-  );
-};
-
-/**
- * Waits for the target element to be visible in viewport, then sets tooltip position.
- */
-export const waitAndSetPositionRelativeToStep = (
-  relativeElement: HTMLElement,
-  tooltipLayer: HTMLElement,
-  step: TourStep,
-  padding: number
-) => {
-  const target = step.element as HTMLElement;
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      const entry = entries[0];
-
-      if (entry.isIntersecting) {
-        observer.disconnect();
-
-        setPositionRelativeToStep(
-          relativeElement,
-          tooltipLayer,
-          step,
-          padding
-        );
-      }
-    },
-    {
-      threshold: 0.1,
-    }
-  );
-
-  observer.observe(target);
+  requestAnimationFrame(() => {
+    setPositionRelativeTo(
+      relativeElement,
+      element,
+      step.element as HTMLElement,
+      step.position === "floating" ? 0 : padding
+    );
+  });
 };