etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +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',
'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)]',
],

7
src/styles/globals.css
View File

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