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

go on with safari ui optimization

Browse Source
This commit is contained in:
Dmitri 2026-04-16 09:28:57 +04:00
parent 49ca57c63e
commit b40dfe54b5
1 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,6 +42,7 @@ import { useTransitionPlayback } from '../hooks/useTransitionPlayback';
import { useBackgroundTransition } from '../hooks/useBackgroundTransition'; import { useBackgroundTransition } from '../hooks/useBackgroundTransition';
import { useBackgroundUrls } from '../hooks/useBackgroundUrls'; import { useBackgroundUrls } from '../hooks/useBackgroundUrls';
import { resolveAssetPlaybackUrl } from '../lib/assetUrl'; import { resolveAssetPlaybackUrl } from '../lib/assetUrl';
import { isSafari } from '../lib/browserUtils';
import { logger } from '../lib/logger'; import { logger } from '../lib/logger';
import { import {
resolveNavigationTarget, resolveNavigationTarget,
@ -115,6 +116,11 @@ export default function RuntimePresentation({
initialIndex: number; initialIndex: number;
} | null>(null); } | null>(null);
// Safari Black Flash Prevention (video transitions only):
// Track the last successfully displayed background to use as a "snapshot" layer.
// Only shown during video transitions to prevent black flashes.
// NOT shown during crossfade navigation (would interfere with smooth animation).
const [lastKnownBgUrl, setLastKnownBgUrl] = useState<string>('');
const transitionVideoRef = useRef<HTMLVideoElement>(null); const transitionVideoRef = useRef<HTMLVideoElement>(null);
const lastInitializedPageIdRef = useRef<string | null>(null); const lastInitializedPageIdRef = useRef<string | null>(null);
@ -344,6 +350,20 @@ export default function RuntimePresentation({
} }
}, [pendingTransitionComplete, isBackgroundReady]); }, [pendingTransitionComplete, isBackgroundReady]);
// Safari Black Flash Prevention (video transitions only):
// Update lastKnownBgUrl when a background is successfully displayed.
// This creates a "snapshot" that persists through video transitions.
useEffect(() => {
if (isBackgroundReady && pageSwitch.isNewBgReady) {
if (pageSwitch.currentBgImageUrl) {
setLastKnownBgUrl(pageSwitch.currentBgImageUrl);
}
}
}, [
isBackgroundReady,
pageSwitch.isNewBgReady,
pageSwitch.currentBgImageUrl,
]);
const navigateToPage = useCallback( const navigateToPage = useCallback(
async ( async (
@ -554,6 +574,25 @@ export default function RuntimePresentation({
}} }}
> >
<BackdropPortalProvider> <BackdropPortalProvider>
{/* Safari Black Flash Prevention (video transitions only):
Persistent snapshot layer shown ONLY during video transitions.
NOT shown during crossfade navigation (would interfere with animation).
z-[-1] keeps it behind all dynamic content layers. */}
{lastKnownBgUrl &&
isSafari() &&
(transitionPreview || pendingTransitionComplete) && (
<div
className='absolute inset-0 pointer-events-none'
style={{
zIndex: -1,
backgroundImage: `url("${lastKnownBgUrl}")`,
backgroundSize: 'contain',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
}}
/>
)}
{/* Page background wrapper - z-5 keeps it BELOW carousel slide (z-10). {/* Page background wrapper - z-5 keeps it BELOW carousel slide (z-10).
Fades in for non-transition navigation. Uses shared CanvasBackground component Fades in for non-transition navigation. Uses shared CanvasBackground component
for single source of truth with constructor (same transitions, same structure). */} for single source of truth with constructor (same transitions, same structure). */}