From dbc91213aa0880d713f8917c1b83fa02d2ebef92 Mon Sep 17 00:00:00 2001
From: Hwacc <mshcccch@gmail.com>
Date: Wed, 10 Jun 2026 18:47:01 +0800
Subject: [PATCH] fix(toast): optimize height measurement by using
 measureUntransformedHeight utility

---
 packages/machines/toast/src/toast.machine.ts |  7 ++----
 packages/machines/toast/src/toast.utils.ts   | 23 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/machines/toast/src/toast.machine.ts b/packages/machines/toast/src/toast.machine.ts
index 055c93d1e8..db87b35b54 100644
--- a/packages/machines/toast/src/toast.machine.ts
+++ b/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 }
diff --git a/packages/machines/toast/src/toast.utils.ts b/packages/machines/toast/src/toast.utils.ts
index 32ca70e778..9b8cef4e2a 100644
--- a/packages/machines/toast/src/toast.utils.ts
+++ b/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
+}