Fix ascii-frame-outer blink: remove compositor layer thrashing on hover
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>
This commit is contained in:
@@ -97,7 +97,6 @@ body {
|
|||||||
padding: var(--spacing-md);
|
padding: var(--spacing-md);
|
||||||
background-color: var(--bg-primary);
|
background-color: var(--bg-primary);
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
transition: var(--transition-default);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -271,15 +270,15 @@ a:not(.btn)::after {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -2px;
|
bottom: -2px;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 0;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
box-shadow: 0 0 5px currentColor;
|
opacity: 0;
|
||||||
transition: width 0.3s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(.btn):hover::after {
|
a:not(.btn):hover::after {
|
||||||
width: 100%;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Matrix-style rain effect on hover for stats */
|
/* Matrix-style rain effect on hover for stats */
|
||||||
@@ -2830,7 +2829,7 @@ input[type="checkbox"]:checked {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1px solid transparent;
|
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);
|
text-shadow: var(--glow-green);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2844,7 +2843,6 @@ input[type="checkbox"]:checked {
|
|||||||
background: rgba(0, 255, 65, 0.2);
|
background: rgba(0, 255, 65, 0.2);
|
||||||
border-color: var(--terminal-green);
|
border-color: var(--terminal-green);
|
||||||
text-shadow: var(--glow-green-intense);
|
text-shadow: var(--glow-green-intense);
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== PAGINATION STYLES ===== */
|
/* ===== PAGINATION STYLES ===== */
|
||||||
|
|||||||
@@ -564,7 +564,6 @@ textarea.editable {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user