ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: always-mounted modal — GPU keeps backdrop-filter composited, no blur delay

Browse Source
This commit is contained in:
Usman Baig
2026-03-25 23:48:57 +01:00
parent b18199aa48
commit 67334f1fd6
1 changed files with 97 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/settings/unified/UnifiedSettingsModal.tsx
View File

@@ -373,29 +373,25 @@ export default function UnifiedSettingsModal() {
}, [guardedAction, closeSettings])
return (
<AnimatePresence>
{isOpen && (
<>
{/* Backdrop — solid scrim, no blur (modal handles its own glass) */}
<motion.div
initial={{ opacity: 1 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.15 }}
className="fixed inset-0 z-[60] bg-black/50"
{/* Backdrop — always mounted, visibility toggled via CSS */}
<div
className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-150 ${
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
onClick={handleBackdropClick}
/>
{/* Modal */}
<motion.div
initial={{ scale: 0.97, y: 8 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.97, y: 8 }}
transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
className="fixed inset-0 z-[61] flex items-center justify-center p-4 pointer-events-none"
{/* Modal — always mounted, blur always composited by GPU */}
<div
className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${
isOpen
? 'opacity-100 scale-100 translate-y-0 pointer-events-auto'
: 'opacity-0 scale-[0.97] translate-y-2 pointer-events-none'
}`}
>
<div
className="pointer-events-auto w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
className="w-full max-w-3xl h-[85vh] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-2xl shadow-xl shadow-black/20 flex flex-col overflow-hidden"
onClick={e => e.stopPropagation()}
>
{/* Header */}
@@ -423,8 +419,9 @@ export default function UnifiedSettingsModal() {
</div>
</div>
{/* Content */}
{/* Content — only render tab content when open to avoid unnecessary SWR calls */}
<div className="flex-1 overflow-y-auto overflow-x-hidden">
{isOpen && (
<AnimatePresence mode="wait">
<motion.div
key={`${context}-${activeTab}`}
@@ -437,9 +434,10 @@ export default function UnifiedSettingsModal() {
<TabContent context={context} activeTab={activeTab} siteId={activeSiteId} onDirtyChange={handleDirtyChange} onRegisterSave={handleRegisterSave} />
</motion.div>
</AnimatePresence>
)}
</div>
{/* Save bar — fixed at modal bottom, outside scroll */}
{/* Save bar */}
<AnimatePresence>
{isDirtyVisible && (
<motion.div
@@ -472,9 +470,7 @@ export default function UnifiedSettingsModal() {
)}
</AnimatePresence>
</div>
</motion.div>
</div>
</>
)}
</AnimatePresence>
)
}