From 06c830607f4344eaf7a42e68399f1e40f3b09237 Mon Sep 17 00:00:00 2001 From: knight Date: Tue, 4 Nov 2025 23:29:52 -0500 Subject: [PATCH] Fix blurry button text rendering across browsers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add subpixel antialiasing for form controls - Remove CSS filters that cause text blur - Use native browser font smoothing - Disable font ligatures for consistency This fixes the issue where some button text appears blurry in certain browsers (especially transcript toggle buttons). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- static/style.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/static/style.css b/static/style.css index 37a250f..048b3c1 100644 --- a/static/style.css +++ b/static/style.css @@ -1,5 +1,27 @@ /* Custom styles for XP.css integration */ +/* Fix blurry text rendering - use native subpixel rendering */ +button, +input, +select, +textarea, +label { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; + font-smooth: never; + -webkit-font-feature-settings: "liga" 0; + font-feature-settings: "liga" 0; +} + +/* Ensure buttons don't have filters or transforms that cause blur */ +button { + filter: none !important; + will-change: auto; + image-rendering: crisp-edges; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; +} + body { background: teal; padding: 0;