gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(console): sharp text — stop compositing content on a transformed layer

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-09 01:36:07 +05:30
parent edda6e9540
commit 60f6c97201
2 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.css
View File

@ -210,8 +210,12 @@ textarea {
} }
@keyframes zk-rise { @keyframes zk-rise {
from { opacity: 0; transform: translateY(6px); } /* Opacity ONLY. A translateY here promoted every element it touched to a GPU
to { opacity: 1; transform: none; } 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 { @keyframes zk-shimmer {

1
src/layout/Shell.css
View File

@ -190,7 +190,6 @@
max-width: 1460px; max-width: 1460px;
margin: 0 auto; margin: 0 auto;
padding: 30px 34px 76px; padding: 30px 34px 76px;
animation: zk-rise 0.28s var(--ease) both;
} }
/* ── Narrow viewports: the rail lies down and scrolls ──────── */ /* ── Narrow viewports: the rail lies down and scrolls ──────── */