fix: measure toast height and swipe deltas in layout px under CSS zoom

getBoundingClientRect() and pointer coordinates report on-screen px, but --initial-height, --offset and --swipe-amount-* are consumed as CSS lengths inside the same zoomed subtree. Under an ancestor zoom the two spaces differ by the zoom factor, so an expanded stack spaces itself out or overlaps and a swipe tracks faster or slower than the pointer.

Divide by Element.currentCSSZoom, which is the effective zoom of the whole ancestor chain, so it needs no wiring from the consumer.

Author: mutewinter

src/index.tsx

@@ -46,6 +46,19 @@ function cn(...classes: (string | undefined)[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+/**
+ * Effective CSS `zoom` on a node, as the product of every zoom in its ancestor chain.
+ *
+ * Under an ancestor `zoom`, `getBoundingClientRect()` and pointer coordinates come back in
+ * on-screen px, while the custom properties they feed (`--initial-height`, `--offset`,
+ * `--swipe-amount-*`) are consumed as layout px inside that same zoomed subtree. Dividing by
+ * this puts both in one space.
+ */
+function getCssZoom(node: HTMLElement | null): number {
+  // `currentCSSZoom` is newer than this package's TypeScript DOM lib.
+  return (node as (HTMLElement & { currentCSSZoom?: number }) | null)?.currentCSSZoom || 1;
+}
+
 function getDefaultSwipeDirections(position: string): Array<SwipeDirection> {
   const [y, x] = position.split('-');
   const directions: Array<SwipeDirection> = [];
@@ -160,7 +173,7 @@ const Toast = (props: ToastProps) => {
   React.useEffect(() => {
     const toastNode = toastRef.current;
     if (toastNode) {
-      const height = toastNode.getBoundingClientRect().height;
+      const height = toastNode.getBoundingClientRect().height / getCssZoom(toastNode);
       // Add toast height to heights array after the toast is mounted
       setInitialHeight(height);
       setHeights((h) => [{ toastId: toast.id, height, position: toast.position }, ...h]);
@@ -174,7 +187,7 @@ const Toast = (props: ToastProps) => {
     const toastNode = toastRef.current;
     const originalHeight = toastNode.style.height;
     toastNode.style.height = 'auto';
-    const newHeight = toastNode.getBoundingClientRect().height;
+    const newHeight = toastNode.getBoundingClientRect().height / getCssZoom(toastNode);
     toastNode.style.height = originalHeight;
 
     setInitialHeight(newHeight);
@@ -374,8 +387,9 @@ const Toast = (props: ToastProps) => {
         const isHighlighted = window.getSelection()?.toString().length > 0;
         if (isHighlighted) return;
 
-        const yDelta = event.clientY - pointerStartRef.current.y;
-        const xDelta = event.clientX - pointerStartRef.current.x;
+        const pointerZoom = getCssZoom(toastRef.current);
+        const yDelta = (event.clientY - pointerStartRef.current.y) / pointerZoom;
+        const xDelta = (event.clientX - pointerStartRef.current.x) / pointerZoom;
 
         // Determine swipe direction if not already locked
         if (!swipeDirection && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) {

test/src/app/page.tsx

@@ -25,7 +25,7 @@ export default function Home({ searchParams }: any) {
   const [historySize, setHistorySize] = React.useState<number | null>(null);
 
   return (
-    <>
+    <div style={searchParams.zoom ? { zoom: searchParams.zoom } : undefined}>
       {searchParams.toastOnMount === '' ? <ToastOnMount /> : null}
       <button data-testid="theme-button" className="button" onClick={() => setTheme('dark')}>
         Change theme
@@ -518,7 +518,7 @@ export default function Home({ searchParams }: any) {
           className: 'secondary-toaster',
         }}
       />
-    </>
+    </div>
   );
 }
 

test/tests/css-zoom.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test';
+
+// `zoom` scales what getBoundingClientRect() and pointer events report, but not offsetHeight,
+// so a toast measured with the rect and spent on a CSS length is wrong by the zoom factor.
+const ZOOMS = ['0.5', '1', '2'];
+
+test.describe('Ancestor CSS zoom', () => {
+  for (const zoom of ZOOMS) {
+    test(`stores the toast height in layout px at zoom ${zoom}`, async ({ page }) => {
+      await page.goto(`/?zoom=${zoom}`);
+      await page.getByTestId('infinity-toast').click();
+
+      const toast = page.locator('[data-sonner-toast]').first();
+      await expect(toast).toHaveCount(1);
+
+      const measured = await toast.evaluate((element: HTMLElement) => ({
+        initialHeight: Number.parseFloat(element.style.getPropertyValue('--initial-height')),
+        offsetHeight: element.offsetHeight,
+      }));
+
+      // --initial-height is consumed as a CSS length inside the zoomed subtree, so it has to
+      // agree with offsetHeight. Before the fix it was offsetHeight * zoom, which is what the
+      // stack then spends on --offset and translateY.
+      expect(Math.abs(measured.initialHeight - measured.offsetHeight)).toBeLessThanOrEqual(1);
+    });
+  }
+});