Optimize height measurement using measureUntransformedHeight

packages/machines/toast/src/toast.machine.ts

@@ -3,7 +3,7 @@ import { raf } from "@zag-js/dom-query"
 import { ensureProps, setRafTimeout } from "@zag-js/utils"
 import * as dom from "./toast.dom"
 import type { ToastGroupSchema, ToastHeight, ToastSchema } from "./toast.types"
-import { getToastDuration } from "./toast.utils"
+import { getToastDuration, measureUntransformedHeight } from "./toast.utils"
 
 const { not } = createGuards<ToastSchema>()
 
@@ -234,10 +234,7 @@ export const machine = createMachine<ToastSchema>({
           const rootEl = dom.getRootEl(scope)
           if (!rootEl) return
 
-          const originalHeight = rootEl.style.height
-          rootEl.style.height = "auto"
-          const height = rootEl.getBoundingClientRect().height
-          rootEl.style.height = originalHeight
+          const height = measureUntransformedHeight(rootEl)
           context.set("initialHeight", height)
 
           const item = { id: prop("id"), height }

packages/machines/toast/src/toast.utils.ts

@@ -216,3 +216,26 @@ export function getGhostAfterStyle(): Style {
     width: "100%",
   }
 }
+
+export function measureUntransformedHeight(rootEl: HTMLElement) {
+  const { height, scale, transform, translate, boxSizing, transition } = rootEl.style
+  // to reset all the styles that are affecting the height measurement
+  rootEl.style.transition = "none"
+  rootEl.style.boxSizing = "border-box"
+  rootEl.style.height = "auto"
+  rootEl.style.scale = "1"
+  rootEl.style.transform = "none"
+  rootEl.style.translate = "none"
+
+  // to get the height
+  const measuredHeight = rootEl.getBoundingClientRect().height
+
+  // to restore the styles
+  rootEl.style.height = height
+  rootEl.style.scale = scale
+  rootEl.style.transform = transform
+  rootEl.style.translate = translate
+  rootEl.style.boxSizing = boxSizing
+  rootEl.style.transition = transition
+  return measuredHeight
+}