@glowhop/core-tour 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @glowhop/core-tour
 
+## 1.5.1
+
+### Patch Changes
+
+- e388604: Fix the popover blinking when a step scrolls its target into view on a page that scrolls inside a container rather than the document. The scroll counted as finished a few frames in, so the popover appeared mid-scroll, stepped aside as if the user were scrolling, and came back once the page stopped. The popover now waits until the target itself has stopped moving.
+
 ## 1.5.0
 
 ### Minor Changes

package/dom/tour-view-driver.d.ts

@@ -359,7 +359,13 @@ export declare class DomTourViewDriver<T> implements TourViewDriver<T> {
     /** Scrolls the target in as the step asks, and returns the settle wait as `beginTargetScroll` does. */
     private scrollTargetIntoView;
     /**
-     * Resolves once the scroller has held still for a couple of frames.
+     * Resolves once the scroller, and the target it carries, have held still for
+     * a couple of frames.
+     *
+     * The target's own position is watched alongside the document's offset: a
+     * page that scrolls inside a container rather than the document moves the
+     * target while `scrollingElement` sits at zero, and would otherwise read as
+     * settled a few frames in, presenting the popover mid-scroll.
      *
      * Deliberately not the `scrollend` event: Safari only fires it from 18.2, so
      * older versions would fall through to the safety timeout on every step, and

package/index.js

@@ -3225,6 +3225,7 @@ class DomTourViewDriver {
       let timeout = null;
       let left = scroller.scrollLeft;
       let top = scroller.scrollTop;
+      let rect = target.getBoundingClientRect();
       let stillFrames = -SCROLL_SETTLE_GRACE_FRAMES;
       const finish = (error) => {
         if (frame !== null)
@@ -3249,9 +3250,11 @@ class DomTourViewDriver {
         frame = null;
         const nextLeft = scroller.scrollLeft;
         const nextTop = scroller.scrollTop;
-        const still = Math.abs(nextLeft - left) <= SCROLL_SETTLE_EPSILON && Math.abs(nextTop - top) <= SCROLL_SETTLE_EPSILON;
+        const nextRect = target.getBoundingClientRect();
+        const still = Math.abs(nextLeft - left) <= SCROLL_SETTLE_EPSILON && Math.abs(nextTop - top) <= SCROLL_SETTLE_EPSILON && Math.abs(nextRect.left - rect.left) <= SCROLL_SETTLE_EPSILON && Math.abs(nextRect.top - rect.top) <= SCROLL_SETTLE_EPSILON;
         left = nextLeft;
         top = nextTop;
+        rect = nextRect;
         stillFrames = still ? stillFrames + 1 : 0;
         if (stillFrames >= SCROLL_SETTLE_STILL_FRAMES)
           return finish();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glowhop/core-tour",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Framework-agnostic product tour engine for GlowTour.js: the tour controller and DOM runtime behind onboarding tours in any framework.",
   "license": "MIT",
   "homepage": "https://glowtour.dev/",