From 60f6c97201d70939c5cf65f8fdd4ad3e63d997ec Mon Sep 17 00:00:00 2001 From: Yashas Date: Wed, 9 Sep 2026 01:36:07 +0530 Subject: [PATCH] =?UTF-8?q?fix(console):=20sharp=20text=20=E2=80=94=20stop?= =?UTF-8?q?=20compositing=20content=20on=20a=20transformed=20layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Text looked soft across the whole app. Cause: the entrance animation used transform: translateY, and .shell__main (the entire content area) ran it with fill-mode both. An element that animated transform stays on a GPU layer, and text composited on a transformed layer renders blurry in Chrome on Linux — so every word on the page was soft. zk-rise is opacity-only now — it fades in without ever moving text onto a fractional-pixel layer — and the page-wide container no longer animates at all (a full-page fade on every navigation only softened text while it played, for nothing). The remaining transforms are hover-only and transient. Co-Authored-By: Claude Opus 5 (1M context) --- src/index.css | 8 ++++++-- src/layout/Shell.css | 1 - 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/index.css b/src/index.css index a1ad495..782fac4 100644 --- a/src/index.css +++ b/src/index.css @@ -210,8 +210,12 @@ textarea { } @keyframes zk-rise { - from { opacity: 0; transform: translateY(6px); } - to { opacity: 1; transform: none; } + /* Opacity ONLY. A translateY here promoted every element it touched to a GPU + layer, and text composited on a transformed layer renders blurry in Chrome + on Linux — which made the whole app look soft. The fade alone gives the + entrance without ever moving text onto a fractional-pixel layer. */ + from { opacity: 0; } + to { opacity: 1; } } @keyframes zk-shimmer { diff --git a/src/layout/Shell.css b/src/layout/Shell.css index c7c5284..5917e7b 100644 --- a/src/layout/Shell.css +++ b/src/layout/Shell.css @@ -190,7 +190,6 @@ max-width: 1460px; margin: 0 auto; padding: 30px 34px 76px; - animation: zk-rise 0.28s var(--ease) both; } /* ── Narrow viewports: the rail lies down and scrolls ──────── */