From 1362f00d39e90aef8a8338887222541a5a992178 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Feb 2026 21:52:21 +0000 Subject: Fix theme performance regressions affecting mobile scroll The new theme CSS files introduced several patterns that cause scroll jank and memory pressure, especially on mobile: - terminal.css: Full-viewport fixed pseudo-element with repeating gradient scanlines forced GPU compositing on every scroll frame. Now limited to desktop only with will-change layer promotion. - codex.css/sakura.css: text-rendering: optimizeLegibility on body triggered expensive kerning/ligature computation on all text. - codex.css: font-feature-settings forced text shaper on every glyph. - codex.css: hyphens: auto required dictionary lookups during layout. - style.css: transition: all on buttons and sidebar links caused unnecessary animation work during scroll hover state changes. - main.ts: checkReadItems did O(n) individual querySelector calls per scroll tick; switched to single querySelectorAll batch query. - Polling interval reduced from 1s to 3s (scroll handler already covers the normal case, polling is just a robustness fallback). https://claude.ai/code/session_0187FXrbScDSWfbNEk9SfJaj --- frontend-vanilla/public/themes/codex.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'frontend-vanilla/public/themes/codex.css') diff --git a/frontend-vanilla/public/themes/codex.css b/frontend-vanilla/public/themes/codex.css index ece9e2d..50942e6 100644 --- a/frontend-vanilla/public/themes/codex.css +++ b/frontend-vanilla/public/themes/codex.css @@ -49,8 +49,11 @@ body { background-color: var(--bg-color); color: var(--text-color); -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1; + /* text-rendering: optimizeLegibility triggers expensive kerning/ligature + computation on all text. On mobile with long feed content this causes + significant layout slowdowns during scroll. The default 'auto' lets + the browser optimize per-element. font-feature-settings similarly + forces the shaper to run on every glyph. Removed for performance. */ } /* ---- Sidebar: Table of Contents ---- */ @@ -236,8 +239,8 @@ body { font-size: 1rem; line-height: 1.75; color: var(--text-color); - hyphens: auto; - -webkit-hyphens: auto; + /* hyphens: auto removed -- requires dictionary lookups during layout for + every line break, expensive with long feed content during scroll. */ } .item-description a { -- cgit v1.2.3