Fix blink root cause: eliminate position:fixed GPU compositing layers
Chrome promotes ALL position:fixed elements to GPU compositing layers for scroll
performance, regardless of whether they have animations. The body::before scanline
overlay (position:fixed, z-index:9999, full-viewport) and body::after watermark
(position:fixed) were both on GPU layers. Every CPU repaint from any hover state
change required a compositor re-blend pass → one-frame blink at compositor sync.
Fixes:
- Move scanlines from body::before (position:fixed) into body { background-image }
— same visual, no separate element, no GPU layer promotion
- Set body::before { display:none } and body::after { display:none } in both
dashboard.css and base.css
- Remove animation:matrix-rain from .stat-card:hover::before — background-position
animation is not GPU-composited, caused CPU repaints every frame while hovered
plus GPU texture uploads when animation started/stopped on cursor enter/exit
- Scope a { transition: all } → transition: color in base.css
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -171,7 +171,7 @@ body {
|
||||
a {
|
||||
color: var(--terminal-green);
|
||||
text-decoration: none;
|
||||
transition: var(--transition-fast);
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--terminal-amber);
|
||||
@@ -185,37 +185,21 @@ img, svg { display: block; max-width: 100%; }
|
||||
03. CRT & TERMINAL EFFECTS
|
||||
---------------------------------------------------------------- */
|
||||
|
||||
/* Horizontal scanline overlay — fixed over the entire viewport */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
/* Scanlines baked into body background — position:fixed overlay removed because
|
||||
Chrome promotes all position:fixed elements to GPU compositing layers, causing
|
||||
a compositor re-blend blink on every CPU repaint triggered by hover states. */
|
||||
body {
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15) 0px,
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: var(--z-overlay);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Binary data-stream watermark — bottom-right corner */
|
||||
body::after {
|
||||
content: '10101010';
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 14px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.55rem;
|
||||
color: var(--terminal-green);
|
||||
opacity: 0.07;
|
||||
pointer-events: none;
|
||||
letter-spacing: 2px;
|
||||
animation: data-stream 3s steps(1) infinite;
|
||||
}
|
||||
body::before { display: none; }
|
||||
/* body::after binary watermark also suppressed — was position:fixed (GPU layer) */
|
||||
body::after { display: none; }
|
||||
|
||||
/* ----------------------------------------------------------------
|
||||
04. TYPOGRAPHY
|
||||
|
||||
@@ -96,28 +96,29 @@ body {
|
||||
margin: 0;
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* CRT Scanline Effect - Subtle retro terminal look */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
/* Scanlines baked into body background — avoids position:fixed GPU layer */
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15),
|
||||
rgba(0, 0, 0, 0.15) 0px,
|
||||
rgba(0, 0, 0, 0.15) 1px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: var(--z-overlay);
|
||||
animation: none;
|
||||
color: var(--text-primary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* body::before was the CRT scanline overlay (position:fixed, z-index:9999).
|
||||
Chrome promotes all position:fixed elements to GPU compositing layers, so
|
||||
every hover-triggered CPU repaint caused a compositor re-blend blink.
|
||||
Scanlines moved to body background-image above. */
|
||||
body::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Suppress body::after binary text watermark (also position:fixed → GPU layer) */
|
||||
body::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Screen Flicker Effect */
|
||||
@@ -293,7 +294,6 @@ a:not(.btn):hover::after {
|
||||
|
||||
.stat-card:hover::before {
|
||||
opacity: 1;
|
||||
animation: matrix-rain 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes matrix-rain {
|
||||
|
||||
Reference in New Issue
Block a user