diff --git a/src/main/frontend/components/whiteboard.cljs b/src/main/frontend/components/whiteboard.cljs
index 1eaf612d25..852cd6a311 100644
--- a/src/main/frontend/components/whiteboard.cljs
+++ b/src/main/frontend/components/whiteboard.cljs
@@ -38,5 +38,5 @@
     [:div.absolute.w-full.h-full
      ;; makes sure the whiteboard will not cover the borders
      {:key name
-      :style {:padding "0.5px"}}
+      :style {:padding "0.5px" :z-index 0}}
      (tldraw-app {:file tldr-name})]))
diff --git a/tldraw/packages/core/src/utils/index.ts b/tldraw/packages/core/src/utils/index.ts
index bb502847c0..9eaeaec145 100644
--- a/tldraw/packages/core/src/utils/index.ts
+++ b/tldraw/packages/core/src/utils/index.ts
@@ -35,6 +35,15 @@ export function throttle<T extends (...args: any) => any>(
   }
 }
 
+export function debounce<T extends (...args: any[]) => void>(fn: T, ms = 0) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let timeoutId: number | any
+  return function (...args: Parameters<T>) {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => fn.apply(args), ms)
+  }
+}
+
 /** Linear interpolate between two values. */
 export function lerp(a: number, b: number, t: number) {
   return a + (b - a) * t
diff --git a/tldraw/packages/react/src/hooks/useResizeObserver.ts b/tldraw/packages/react/src/hooks/useResizeObserver.ts
index 35f718e13d..e7c7ad95a8 100644
--- a/tldraw/packages/react/src/hooks/useResizeObserver.ts
+++ b/tldraw/packages/react/src/hooks/useResizeObserver.ts
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import type { TLViewport, TLBounds } from '@tldraw/core'
+import { TLViewport, TLBounds, debounce } from '@tldraw/core'
 
 const getNearestScrollableContainer = (element: HTMLElement): HTMLElement | Document => {
   let parent = element.parentElement
@@ -54,11 +54,12 @@ export function useResizeObserver<T extends HTMLElement>(
 
   React.useEffect(() => {
     const scrollingAnchor = ref.current ? getNearestScrollableContainer(ref.current) : document
-    scrollingAnchor.addEventListener('scroll', updateBounds)
-    scrollingAnchor.addEventListener('resize', updateBounds)
+    const debouncedupdateBounds = debounce(updateBounds, 100)
+    scrollingAnchor.addEventListener('scroll', debouncedupdateBounds)
+    scrollingAnchor.addEventListener('resize', debouncedupdateBounds)
     return () => {
-      scrollingAnchor.removeEventListener('scroll', updateBounds)
-      scrollingAnchor.removeEventListener('resize', updateBounds)
+      scrollingAnchor.removeEventListener('scroll', debouncedupdateBounds)
+      scrollingAnchor.removeEventListener('resize', debouncedupdateBounds)
     }
   }, [])