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

fix: resolve hover flickering caused by GPU layer destruction

Browse Source 
- Preserve translateZ(0) on all hover/active transforms to prevent
  GPU compositing layer teardown/recreation cycle
- Lower body::before noise texture z-index to -1
- Add will-change: opacity to card spotlight pseudo-element
- Include backdrop-blur-linear in mobile performance override
- Replace transition-all with specific properties in BentoCard
This commit is contained in:
Fringg
2026-02-27 07:41:27 +03:00
parent bdc201b5ea
commit d8cf4301ca
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ui/BentoCard.tsx
View File

@@ -45,7 +45,8 @@ const baseClasses = `
p-[var(--bento-padding)] p-[var(--bento-padding)]
bg-dark-900/70 bg-dark-900/70
border border-dark-700/40 border border-dark-700/40
transition-all duration-300 ease-smooth duration-300 ease-smooth
transition-[border-color,background-color,box-shadow,transform]
`; `;
const hoverClasses = ` const hoverClasses = `

20
src/styles/globals.css
View File

@@ -255,7 +255,7 @@
content: ''; content: '';
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 0; z-index: -1;
pointer-events: none; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.03; opacity: 0.03;
@@ -383,7 +383,7 @@ img.twemoji {
.bento-card-hover:hover { .bento-card-hover:hover {
@apply border-dark-600/50 bg-dark-800/60 shadow-lg; @apply border-dark-600/50 bg-dark-800/60 shadow-lg;
transform: translateY(-2px); transform: translateY(-2px) translateZ(0);
/* Intensify Glass Border & Add Top Spotlight */ /* Intensify Glass Border & Add Top Spotlight */
box-shadow: box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
@@ -400,6 +400,7 @@ img.twemoji {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
will-change: opacity;
} }
.bento-card-hover:hover::after { .bento-card-hover:hover::after {
@@ -407,7 +408,7 @@ img.twemoji {
} }
.bento-card-hover:active { .bento-card-hover:active {
transform: scale(0.98); transform: scale(0.98) translateZ(0);
transition-duration: 0.15s; transition-duration: 0.15s;
} }
@@ -421,11 +422,11 @@ img.twemoji {
.bento-card-glow:hover { .bento-card-glow:hover {
@apply border-accent-500/30 shadow-glow; @apply border-accent-500/30 shadow-glow;
transform: translateY(-2px); transform: translateY(-2px) translateZ(0);
} }
.bento-card-glow:active { .bento-card-glow:active {
transform: scale(0.98); transform: scale(0.98) translateZ(0);
transition-duration: 0.15s; transition-duration: 0.15s;
} }
@@ -462,7 +463,7 @@ img.twemoji {
.light .bento-card-hover:hover { .light .bento-card-hover:hover {
@apply border-champagne-400/50 bg-champagne-50 shadow-md; @apply border-champagne-400/50 bg-champagne-50 shadow-md;
transform: translateY(-2px); transform: translateY(-2px) translateZ(0);
/* Intensify Light Theme Glass Border */ /* Intensify Light Theme Glass Border */
box-shadow: box-shadow:
inset 0 1px 0 0 rgba(0, 0, 0, 0.06), inset 0 1px 0 0 rgba(0, 0, 0, 0.06),
@@ -476,7 +477,7 @@ img.twemoji {
.light .bento-card-glow:hover { .light .bento-card-glow:hover {
@apply border-accent-400/40 shadow-lg; @apply border-accent-400/40 shadow-lg;
transform: translateY(-2px); transform: translateY(-2px) translateZ(0);
} }
/* ========== DARK THEME COMPONENTS (default) ========== */ /* ========== DARK THEME COMPONENTS (default) ========== */
@@ -682,7 +683,8 @@ img.twemoji {
.backdrop-blur-lg, .backdrop-blur-lg,
.backdrop-blur-xl, .backdrop-blur-xl,
.backdrop-blur-2xl, .backdrop-blur-2xl,
.backdrop-blur-3xl { .backdrop-blur-3xl,
.backdrop-blur-linear {
backdrop-filter: none !important; backdrop-filter: none !important;
-webkit-backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
} }
@@ -1147,7 +1149,7 @@ img.twemoji {
.btn:active, .btn:active,
.card-hover:active, .card-hover:active,
.nav-item:active { .nav-item:active {
transform: scale(0.98); transform: scale(0.98) translateZ(0);
} }
} }