From 3497c4cb4708befd4a514b80c15dc016148cc487 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Thu, 19 Mar 2026 11:25:18 -0400
Subject: [PATCH] Fix ascii-frame-outer blink: remove compositor layer
 thrashing on hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four root causes removed:
- body { transition: all } — forced browser to check all CSS properties
  on every hover event across the entire page
- a:not(.btn)::after underline: width+box-shadow transition replaced with
  opacity transition — width repaints paint layer, box-shadow forced parent
  section repaint; opacity is GPU-composited and doesn't repaint ancestors
- .ticket-link:hover { transform: translateX } — created/destroyed GPU
  compositor layer on every ticket ID hover; removed, scoped transition
  to specific non-layout properties
- .btn:hover { transform: translateY } in ticket.css — same layer issue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/dashboard.css | 12 +++++-------
 assets/css/ticket.css    |  1 -
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/assets/css/dashboard.css b/assets/css/dashboard.css
index 1d4a91a..8885f69 100644
--- a/assets/css/dashboard.css
+++ b/assets/css/dashboard.css
@@ -97,7 +97,6 @@ body {
     padding: var(--spacing-md);
     background-color: var(--bg-primary);
     color: var(--text-primary);
-    transition: var(--transition-default);
     position: relative;
 }
 
@@ -271,15 +270,15 @@ a:not(.btn)::after {
     position: absolute;
     bottom: -2px;
     left: 0;
-    width: 0;
+    width: 100%;
     height: 1px;
     background: currentColor;
-    box-shadow: 0 0 5px currentColor;
-    transition: width 0.3s ease;
+    opacity: 0;
+    transition: opacity 0.2s ease;
 }
 
 a:not(.btn):hover::after {
-    width: 100%;
+    opacity: 1;
 }
 
 /* Matrix-style rain effect on hover for stats */
@@ -2830,7 +2829,7 @@ input[type="checkbox"]:checked {
     border-radius: 0;
     display: inline-block;
     border: 1px solid transparent;
-    transition: all 0.3s ease;
+    transition: background 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
     text-shadow: var(--glow-green);
 }
 
@@ -2844,7 +2843,6 @@ input[type="checkbox"]:checked {
     background: rgba(0, 255, 65, 0.2);
     border-color: var(--terminal-green);
     text-shadow: var(--glow-green-intense);
-    transform: translateX(2px);
 }
 
 /* ===== PAGINATION STYLES ===== */
diff --git a/assets/css/ticket.css b/assets/css/ticket.css
index 3915966..17120d6 100644
--- a/assets/css/ticket.css
+++ b/assets/css/ticket.css
@@ -564,7 +564,6 @@ textarea.editable {
 }
 
 .btn:hover {
-    transform: translateY(-2px);
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }