Updating

packages/framer-motion/src/projection/geometry/utils.ts

@@ -18,6 +18,15 @@ export function boxEquals(a: Box, b: Box) {
     )
 }
 
+export function boxEqualsRounded(a: Box, b: Box) {
+    return (
+        Math.round(a.x.min) === Math.round(b.x.min) &&
+        Math.round(a.x.max) === Math.round(b.x.max) &&
+        Math.round(a.y.min) === Math.round(b.y.min) &&
+        Math.round(a.y.max) === Math.round(b.y.max)
+    )
+}
+
 export function aspectRatio(box: Box): number {
     return calcLength(box.x) / calcLength(box.y)
 }

packages/framer-motion/src/projection/node/create-projection-node.ts

@@ -17,7 +17,12 @@ import { createBox, createDelta } from "../geometry/models"
 import { transformBox, translateAxis } from "../geometry/delta-apply"
 import { Axis, AxisDelta, Box, Delta, Point } from "../geometry/types"
 import { getValueTransition } from "../../animation/utils/transitions"
-import { aspectRatio, boxEquals, isDeltaZero } from "../geometry/utils"
+import {
+    aspectRatio,
+    boxEquals,
+    boxEqualsRounded,
+    isDeltaZero,
+} from "../geometry/utils"
 import { NodeStack } from "../shared/stack"
 import { scaleCorrectors } from "../styles/scale-correction"
 import { buildProjectionTransform } from "../styles/transform"
@@ -49,6 +54,7 @@ import { isSVGElement } from "../../render/dom/utils/is-svg-element"
 import { animateSingleValue } from "../../animation/interfaces/single-value"
 import { clamp } from "../../utils/clamp"
 import { steps } from "../../frameloop/frame"
+import { noop } from "../../utils/noop"
 
 const transformAxes = ["", "X", "Y", "Z"]
 
@@ -443,7 +449,7 @@ export function createProjectionNode<I>({
                          */
                         const targetChanged =
                             !this.targetLayout ||
-                            !boxEquals(this.targetLayout, newLayout) ||
+                            !boxEqualsRounded(this.targetLayout, newLayout) ||
                             hasRelativeTargetChanged
 
                         /**
@@ -585,13 +591,6 @@ export function createProjectionNode<I>({
                 ? transformTemplate(this.latestValues, "")
                 : undefined
 
-            if ((this.instance as any).dataset?.framerName === "Why Framer") {
-                console.log(
-                    "taking snapshot, update already scheduled:",
-                    this.updateScheduled
-                )
-            }
-
             this.updateSnapshot()
             shouldNotifyListeners && this.notifyListeners("willUpdate")
         }
@@ -721,10 +720,6 @@ export function createProjectionNode<I>({
             if (this.snapshot || !this.instance) return
 
             this.snapshot = this.measure()
-
-            if ((this.instance as any).dataset?.framerName === "Why Framer") {
-                console.log("snapshot", this.snapshot.layoutBox.y)
-            }
         }
 
         updateLayout() {
@@ -757,10 +752,6 @@ export function createProjectionNode<I>({
             const prevLayout = this.layout
             this.layout = this.measure(false)
 
-            if ((this.instance as any).dataset?.framerName === "Why Framer") {
-                console.log("layout", this.layout.layoutBox.y)
-            }
-
             this.layoutCorrected = createBox()
             this.isLayoutDirty = false
             this.projectionDelta = undefined
@@ -1961,7 +1952,7 @@ function notifyLayoutUpdate(node: IProjectionNode) {
                         parentLayout.layoutBox
                     )
 
-                    if (!boxEquals(relativeSnapshot, relativeLayout)) {
+                    if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
                         hasRelativeTargetChanged = true
                     }
 
@@ -2106,25 +2097,27 @@ const defaultLayoutTransition = {
     ease: [0.4, 0, 0.1, 1],
 }
 
-let roundPoint: (point: number) => number
-
-const userAgentContaints = (string: string) =>
+const userAgentContains = (string: string) =>
+    typeof navigator !== "undefined" &&
     navigator.userAgent.toLowerCase().includes(string)
 
+/**
+ * Measured bounding boxes must be rounded in Safari and
+ * left untouched in Chrome, otherwise non-integer layouts within scaled-up elements
+ * can appear to jump.
+ */
+const roundPoint =
+    userAgentContains("applewebkit/") && !userAgentContains("chrome/")
+        ? Math.round
+        : noop
+
 function roundAxis(axis: Axis): void {
     // Round to the nearest .5 pixels to support subpixel layouts
     axis.min = roundPoint(axis.min)
     axis.max = roundPoint(axis.max)
 }
 
 function roundBox(box: Box): void {
-    if (!roundPoint) {
-        roundPoint =
-            userAgentContaints("applewebkit/") && !userAgentContaints("chrome/")
-                ? (point: number) => point
-                : (point: number) => point
-    }
-
     roundAxis(box.x)
     roundAxis(box.y)
 }