From 9bb74cffd245510f7d93894322241d4181aeb91b Mon Sep 17 00:00:00 2001 From: sravan Date: Sun, 19 Jul 2026 06:57:48 +0530 Subject: [PATCH] mobile: real slide-in + fade on open, list column untouched = zero reflow (batch129) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The reflow that caused the end-of-slide hitch was never the content slide itself — it was SHOWING the list column during the slide and hiding it (display:flex->none) at the end. So keep .chatcol display:none the whole time (untouched) and animate ONLY .content: it pushes in from translateX(12%)->0 with an opacity fade, on its already-promoted GPU layer. Real slide motion, and nothing to reflow when it ends. (This also explains the batch126 breakage: that made .chatcol position:absolute, disturbing the touch/layout target — not touched here.) Co-Authored-By: Claude Opus 4.8 --- server/public/home.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/server/public/home.html b/server/public/home.html index 27007f7..c9fa032 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -1113,8 +1113,8 @@ /* OPEN = instant position + a quick opacity fade. No transform, no parallax, no list-column display toggle → there is literally nothing to reflow when it finishes, so the old ~40ms end-of-slide settle is gone by construction. The list (chatcol) stays display:none throughout; content fades in over the bg. */ - body.chat-opening .content{display:block!important;opacity:0;} - body.chat-opening .content.chat-fadein{opacity:1;transition:opacity .14s ease-out;} + body.chat-opening .content{display:block!important;opacity:0;transform:translateX(12%);} + body.chat-opening .content.chat-fadein{opacity:1;transform:translateX(0);transition:opacity .18s ease-out, transform .24s cubic-bezier(.32,.72,0,1);} /* real slide-in from the right + fade. The list column (.chatcol) is NEVER shown during the open — it stays display:none throughout — so there is no display toggle and therefore no reflow when the slide ends. Content is already on its own GPU layer (will-change on body.chat-open), so this is a pure compositor transform. */ /* CLOSE / drag-back: reveal the list underneath (parallax in) while the conversation slides off right (.content moved by an inline transform in showWelcome()/the edge-drag gesture). */ body.chat-closing .content, body.chat-dragging .content{display:block!important;z-index:2;box-shadow:-12px 0 30px rgba(15,23,42,.18);will-change:transform;} @@ -1146,7 +1146,7 @@ -