From c411975bb9da19ea85c46ad8e739cacdb6f800f0 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 12 Mar 2026 07:16:27 +0000 Subject: [PATCH] fix: use timestamp guard instead of rAF for mobile backdrop click MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On first page load on mobile, the synthetic mousedown from a tap can arrive ~300ms after the touch event — well after a single requestAnimationFrame (~16ms). Replace the rAF-based overlayReady guard with a 400ms timestamp check from mount time to reliably ignore stale synthetic events on slow first loads. https://claude.ai/code/session_018DYwSysqysMmaRi5XkqTpo --- src/lib/components/NoteEditor.svelte | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte index 6aefdb3..feb819e 100644 --- a/src/lib/components/NoteEditor.svelte +++ b/src/lib/components/NoteEditor.svelte @@ -179,21 +179,13 @@ // On mobile, the tap that opens the editor produces synthetic mouse events // (mousedown → mouseup → click) at the original touch coordinates. If those // coordinates land on the overlay backdrop, the editor would close instantly. - // Guard against this by ignoring mousedowns that arrive within the first - // animation frame after mount. - let overlayReady = false; - $effect(() => { - const id = requestAnimationFrame(() => { - overlayReady = true; - }); - return () => { - overlayReady = false; - cancelAnimationFrame(id); - }; - }); + // On first page load, synthetic mousedown can arrive ~300ms after the tap + // (well after a single rAF). Use a timestamp guard to ignore early events. + const mountTime = Date.now(); + const OVERLAY_READY_DELAY = 400; function handleOverlayMousedown(e: MouseEvent) { - if (!overlayReady) return; + if (Date.now() - mountTime < OVERLAY_READY_DELAY) return; mousedownOnOverlay = e.target === e.currentTarget; }