admin/39948-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed z-index for safari

Browse Source
This commit is contained in:
Dmitri 2026-04-16 10:11:54 +04:00
parent b40dfe54b5
commit 7ea063390d
1 changed files with 7 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/RuntimePresentation.tsx
View File

@ -351,19 +351,13 @@ export default function RuntimePresentation({
}, [pendingTransitionComplete, isBackgroundReady]); }, [pendingTransitionComplete, isBackgroundReady]);
// Safari Black Flash Prevention (video transitions only): // Safari Black Flash Prevention (video transitions only):
// Update lastKnownBgUrl when a background is successfully displayed. // Update lastKnownBgUrl whenever we have a valid background image.
// This creates a "snapshot" that persists through video transitions. // This ensures snapshot is always ready before transitions start.
useEffect(() => { useEffect(() => {
if (isBackgroundReady && pageSwitch.isNewBgReady) { if (pageSwitch.currentBgImageUrl) {
if (pageSwitch.currentBgImageUrl) { setLastKnownBgUrl(pageSwitch.currentBgImageUrl);
setLastKnownBgUrl(pageSwitch.currentBgImageUrl);
}
} }
}, [ }, [pageSwitch.currentBgImageUrl]);
isBackgroundReady,
pageSwitch.isNewBgReady,
pageSwitch.currentBgImageUrl,
]);
const navigateToPage = useCallback( const navigateToPage = useCallback(
async ( async (
@ -577,14 +571,13 @@ export default function RuntimePresentation({
{/* Safari Black Flash Prevention (video transitions only): {/* Safari Black Flash Prevention (video transitions only):
Persistent snapshot layer shown ONLY during video transitions. Persistent snapshot layer shown ONLY during video transitions.
NOT shown during crossfade navigation (would interfere with animation). NOT shown during crossfade navigation (would interfere with animation).
z-[-1] keeps it behind all dynamic content layers. */} z-[1] keeps it behind backgrounds (z-5) but above the black container. */}
{lastKnownBgUrl && {lastKnownBgUrl &&
isSafari() && isSafari() &&
(transitionPreview || pendingTransitionComplete) && ( (transitionPreview || pendingTransitionComplete) && (
<div <div
className='absolute inset-0 pointer-events-none' className='absolute inset-0 z-[1] pointer-events-none'
style={{ style={{
zIndex: -1,
backgroundImage: `url("${lastKnownBgUrl}")`, backgroundImage: `url("${lastKnownBgUrl}")`,
backgroundSize: 'contain', backgroundSize: 'contain',
backgroundPosition: 'center', backgroundPosition: 'center',