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

20
src/styles/globals.css
View File

@@ -255,7 +255,7 @@
content: '';
position: fixed;
inset: 0;
z-index: 0;
z-index: -1;
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");
opacity: 0.03;
@@ -383,7 +383,7 @@ img.twemoji {
.bento-card-hover:hover {
@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 */
box-shadow:
inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
@@ -400,6 +400,7 @@ img.twemoji {
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
will-change: opacity;
}
.bento-card-hover:hover::after {
@@ -407,7 +408,7 @@ img.twemoji {
}
.bento-card-hover:active {
transform: scale(0.98);
transform: scale(0.98) translateZ(0);
transition-duration: 0.15s;
}
@@ -421,11 +422,11 @@ img.twemoji {
.bento-card-glow:hover {
@apply border-accent-500/30 shadow-glow;
transform: translateY(-2px);
transform: translateY(-2px) translateZ(0);
}
.bento-card-glow:active {
transform: scale(0.98);
transform: scale(0.98) translateZ(0);
transition-duration: 0.15s;
}
@@ -462,7 +463,7 @@ img.twemoji {
.light .bento-card-hover:hover {
@apply border-champagne-400/50 bg-champagne-50 shadow-md;
transform: translateY(-2px);
transform: translateY(-2px) translateZ(0);
/* Intensify Light Theme Glass Border */
box-shadow:
inset 0 1px 0 0 rgba(0, 0, 0, 0.06),
@@ -476,7 +477,7 @@ img.twemoji {
.light .bento-card-glow:hover {
@apply border-accent-400/40 shadow-lg;
transform: translateY(-2px);
transform: translateY(-2px) translateZ(0);
}
/* ========== DARK THEME COMPONENTS (default) ========== */
@@ -682,7 +683,8 @@ img.twemoji {
.backdrop-blur-lg,
.backdrop-blur-xl,
.backdrop-blur-2xl,
.backdrop-blur-3xl {
.backdrop-blur-3xl,
.backdrop-blur-linear {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@@ -1147,7 +1149,7 @@ img.twemoji {
.btn:active,
.card-hover:active,
.nav-item:active {
transform: scale(0.98);
transform: scale(0.98) translateZ(0);
}
}