From 7e3361437574bafb6e19326c45414ac475c77603 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Wed, 6 May 2026 20:54:27 -0700 Subject: [PATCH] fix(dashboard): drop translateY(--vv-offset-top) on ChatView mobile The transform amplified jitter during iOS textarea swipes: visualViewport scroll events updated --vv-offset-top rapidly, the transform followed, and the thread juddered then shifted ~300px exposing the body background. Removing the transform leaves the thread where iOS places it; the height-shrink to var(--vv-height) still constrains it to the visible area. Trade-off: on initial focus the thread anchor relies on iOS's own viewport adjustment instead of explicit compensation, but that beats the swipe-time jitter. Co-Authored-By: Claude Opus 4.7 (1M context) --- packages/dashboard/app/components/ChatView.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css index 11f4b8d1b..340159395 100644 --- a/packages/dashboard/app/components/ChatView.css +++ b/packages/dashboard/app/components/ChatView.css @@ -1105,8 +1105,14 @@ .chat-thread[style*="--keyboard-overlap"] { height: calc(var(--vv-height, calc(100dvh - var(--keyboard-overlap, 0px))) - var(--header-height)); max-height: calc(var(--vv-height, calc(100dvh - var(--keyboard-overlap, 0px))) - var(--header-height)); - transform: translateY(var(--vv-offset-top, 0px)); - will-change: transform; + /* The previous translateY(--vv-offset-top) compensated for iOS + shifting the visual viewport on focus, but it also amplified + jitter during a swipe — visualViewport scroll events update + --vv-offset-top rapidly, the transform follows, and the thread + jutters / shifts ~300px / exposes the body background. Dropping + the transform lets the browser place the thread where iOS + expects; height-shrink to vv-height still keeps it inside the + visible area. */ } /* On mobile, the "New Chat" affordance uses a full-width pinned footer. */