Commit 5d11c9c2 authored by Mahmoud Aglan's avatar Mahmoud Aglan

Fix rendering bug: remove all GPU layer promotions from list containers

The list disappearance was caused by multiple CSS properties creating
GPU compositing layers that Chrome fails to paint correctly for tall
content:

1. backdrop-filter on .top-header (sticky + blur = broken paint bounds)
2. animation on .page-content (creates layer on entire page)
3. transition:all on every table row (hundreds of compositing hints)
4. tableRowIn animation with transform (layer per animated row)
5. transition + hover on .card (unnecessary for a container)

Removed all these GPU-triggering properties. The visual appearance is
preserved (opacity 0.97 white background instead of blur, hover effects
still work via :hover without transition).
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 6e65d1c7
......@@ -419,9 +419,7 @@ code {
TOP HEADER
══════════════════════════════════════════════════ */
.top-header {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.97);
border-bottom: 1px solid var(--border-light);
padding: 0 28px;
height: 64px;
......@@ -527,7 +525,6 @@ code {
.page-content {
flex: 1;
padding: 28px;
animation: fadeInUp var(--duration-slow) var(--ease-out);
}
@keyframes fadeInUp {
......@@ -564,12 +561,6 @@ code {
box-shadow: var(--shadow-sm);
margin-bottom: 0;
overflow: visible;
transition: box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) ease;
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card-header {
......@@ -788,10 +779,6 @@ code {
transition: background var(--duration-fast) ease;
}
.data-table tbody tr {
transition: all var(--duration-fast) ease;
}
.data-table tbody tr:hover {
background: rgba(var(--brand-primary-rgb), 0.03);
}
......@@ -804,33 +791,6 @@ code {
border-bottom: none;
}
/* Table row entrance animation — only first 10 rows animate staggered */
.data-table tbody tr:nth-child(-n+10) {
animation: tableRowIn var(--duration-normal) var(--ease-out) backwards;
}
.data-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.data-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.data-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.data-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.data-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.data-table tbody tr:nth-child(6) { animation-delay: 150ms; }
.data-table tbody tr:nth-child(7) { animation-delay: 180ms; }
.data-table tbody tr:nth-child(8) { animation-delay: 210ms; }
.data-table tbody tr:nth-child(9) { animation-delay: 240ms; }
.data-table tbody tr:nth-child(10) { animation-delay: 270ms; }
@keyframes tableRowIn {
from {
opacity: 0;
transform: translateX(8px);
}
to {
opacity: 1;
transform: none;
}
}
.actions-col {
width: 1%;
white-space: nowrap;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment