etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/data-display/Card/Card.tsx
View File

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

7
src/styles/globals.css
View File

@@ -349,7 +349,6 @@ img.twemoji {
@apply border border-dark-700/40 bg-dark-900/70; @apply border border-dark-700/40 bg-dark-900/70;
border-radius: var(--bento-radius); border-radius: var(--bento-radius);
padding: var(--bento-padding); padding: var(--bento-padding);
transform: translateZ(0);
/* Glass Border - Inset Highlight */ /* Glass Border - Inset Highlight */
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
/* Stagger animation support */ /* Stagger animation support */
@@ -485,7 +484,6 @@ img.twemoji {
.card { .card {
@apply border border-dark-700/40 bg-dark-900/70 p-5 transition-colors duration-200 sm:p-6; @apply border border-dark-700/40 bg-dark-900/70 p-5 transition-colors duration-200 sm:p-6;
border-radius: var(--bento-radius); border-radius: var(--bento-radius);
transform: translateZ(0);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
} }
@@ -511,7 +509,6 @@ img.twemoji {
/* Glass effect - Dark (optimized for mobile) */ /* Glass effect - Dark (optimized for mobile) */
.glass { .glass {
@apply border border-dark-700/30 bg-dark-900/80; @apply border border-dark-700/30 bg-dark-900/80;
transform: translateZ(0);
} }
/* Enable backdrop-blur only on desktop where it's performant */ /* Enable backdrop-blur only on desktop where it's performant */
@@ -695,7 +692,6 @@ img.twemoji {
.light .card { .light .card {
@apply border-champagne-300/50 bg-champagne-50/90 p-5 shadow-sm sm:p-6; @apply border-champagne-300/50 bg-champagne-50/90 p-5 shadow-sm sm:p-6;
border-radius: var(--bento-radius); border-radius: var(--bento-radius);
transform: translateZ(0);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03); box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.03);
} }
@@ -716,7 +712,6 @@ img.twemoji {
/* Glass effect - Light (optimized for mobile) */ /* Glass effect - Light (optimized for mobile) */
.light .glass { .light .glass {
@apply border border-champagne-300/40 bg-champagne-50/90; @apply border border-champagne-300/40 bg-champagne-50/90;
transform: translateZ(0);
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@@ -1110,7 +1105,7 @@ img.twemoji {
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: translateY(0); transform: none;
} }
} }