perf: remove permanent GPU layer promotion from cards to fix flickering

Remove translateZ(0) from base states of .bento-card, .card, .glass
and their light theme variants. Remove transform-gpu from Card.tsx.
Change bentoFadeIn animation to end with transform:none instead of
translateY(0). GPU promotion now only occurs during hover/active
interactions, preventing Chrome from creating excessive compositing
layers that cause flickering with animated backgrounds.
This commit is contained in:
Fringg
2026-02-27 08:27:07 +03:00
parent 7f17d95ed6
commit fe32322c32
2 changed files with 1 additions and 8 deletions

View File

@@ -12,8 +12,6 @@ const cardVariants = cva(
'border border-dark-700/40 bg-dark-900/70',
'rounded-[var(--bento-radius)]',
'transition-[border-color,background-color,box-shadow,transform,opacity] duration-200',
// GPU acceleration
'transform-gpu',
// Glass border inset
'shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05)]',
],