Promote ascii-frame-outer to GPU layer to stop hover blink
The body::before scanline overlay (position:fixed, z-index:9999) requires the compositor to re-blend over the section every time a CPU repaint happens inside it. Hover state entry/exit triggers these repaints, causing a visible blink as the compositor flushes. Fixes: - Add will-change:transform + transform:translateZ(0) to ascii-frame-outer to promote it to its own GPU compositing layer, isolating its repaints from the scanline compositing pass - Convert corner-pulse and subtle-pulse from text-shadow (CPU repaint) to opacity (GPU composited) to eliminate continuous repaint pressure inside the section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -991,6 +991,8 @@ h1 {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--bg-primary);
|
background: var(--bg-primary);
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
will-change: transform;
|
||||||
|
transform: translateZ(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ascii-frame-outer::before {
|
.ascii-frame-outer::before {
|
||||||
@@ -1029,8 +1031,8 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes corner-pulse {
|
@keyframes corner-pulse {
|
||||||
0%, 100% { text-shadow: var(--glow-green); }
|
0%, 100% { opacity: 0.7; }
|
||||||
50% { text-shadow: var(--glow-green-intense); }
|
50% { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-left-corner {
|
.bottom-left-corner {
|
||||||
@@ -1086,8 +1088,8 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes subtle-pulse {
|
@keyframes subtle-pulse {
|
||||||
0%, 100% { text-shadow: var(--glow-amber); }
|
0%, 100% { opacity: 0.75; }
|
||||||
50% { text-shadow: var(--glow-amber-intense); }
|
50% { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.ascii-section-header::before {
|
.ascii-section-header::before {
|
||||||
|
|||||||
Reference in New Issue
Block a user