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() @@ -234,10 +234,7 @@ export const machine = createMachine({ 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 +}