diff --git a/.changeset/silly-hotels-visit.md b/.changeset/silly-hotels-visit.md new file mode 100644 index 0000000000..c0ecb6fa13 --- /dev/null +++ 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 index 5286a5b5b8..9b207a2721 100644 --- 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],