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

fix: use visibility instead of opacity — zero intermediate frames, no blur flash

Browse Source
This commit is contained in:
Usman Baig
2026-03-25 23:53:15 +01:00
parent 67334f1fd6
commit bd8fae626c
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -374,20 +374,20 @@ export default function UnifiedSettingsModal() {
return ( return (
<> <>
{/* Backdrop — always mounted, visibility toggled via CSS */} {/* Backdrop — binary visibility, no opacity transition */}
<div <div
className={`fixed inset-0 z-[60] bg-black/50 transition-opacity duration-150 ${ className={`fixed inset-0 z-[60] bg-black/50 ${
isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none' isOpen ? 'visible' : 'invisible'
}`} }`}
onClick={handleBackdropClick} onClick={handleBackdropClick}
/> />
{/* Modal — always mounted, blur always composited by GPU */} {/* Modal — always mounted, no opacity animation (prevents backdrop-filter flash) */}
<div <div
className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-all duration-200 ease-out ${ className={`fixed inset-0 z-[61] flex items-center justify-center p-4 transition-transform duration-200 ease-out ${
isOpen isOpen
? 'opacity-100 scale-100 translate-y-0 pointer-events-auto' ? 'visible scale-100 translate-y-0 pointer-events-auto'
: 'opacity-0 scale-[0.97] translate-y-2 pointer-events-none' : 'invisible scale-[0.97] translate-y-2 pointer-events-none'
}`} }`}
> >
<div <div