Fix for overlay stuck in animation loop

graphcommerce-org · Mar 15, 2024 · 29407d2 · 29407d2
1 parent 10fa16e
commit 29407d2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/silly-hotels-visit.md b/.changeset/silly-hotels-visit.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/framer-scroller": patch
+---
+
+Fixed a bug on Firefox in which all overlays would retrigger the scrollTo function on opening or closing.
diff --git a/packages/framer-scroller/hooks/useScrollTo.ts b/packages/framer-scroller/hooks/useScrollTo.ts
@@ -108,9 +108,13 @@ export function useScrollTo() {
 
       if (Array.isArray(incoming)) {
         const checkPositions = getScrollSnapPositions()
-        if (checkPositions.x[incoming[0]] !== to.x || checkPositions.y[incoming[1]] !== to.y)
-          await scrollTo(incoming, options, __retrigger + 1)
+        // We check if the value is close enough, since firefox does not round in whole pixels. Values in in`to` could be > 0 but < 1
+        const closeEnoughX = checkPositions.x.some((x) => Math.abs(x - to.x) <= 1)
+        const closeEnoughY = checkPositions.y.some((y) => Math.abs(y - to.y) <= 1)
+
+        if (!closeEnoughX || !closeEnoughY) await scrollTo(incoming, options, __retrigger + 1)
       }
+
       enableSnap()
     },
     [scrollerRef, enableSnap, getScrollSnapPositions, disableSnap, register, scroll, duration],