diff --git a/frontend/src/components/RuntimePresentation.tsx b/frontend/src/components/RuntimePresentation.tsx index 9aeff65..32014bd 100644 --- a/frontend/src/components/RuntimePresentation.tsx +++ b/frontend/src/components/RuntimePresentation.tsx @@ -50,7 +50,6 @@ import { } from '../lib/navigationHelpers'; import type { TransitionPhase } from '../types/presentation'; import type { CanvasElement } from '../types/constructor'; -import { isSafari } from '../lib/browserUtils'; interface RuntimePresentationProps { projectSlug: string; @@ -116,10 +115,6 @@ export default function RuntimePresentation({ initialIndex: number; } | null>(null); - // Safari Black Flash Prevention: - // Track the last successfully displayed background to use as a "snapshot" layer. - // This layer sits behind everything and ensures we never see the black container. - const [lastKnownBgUrl, setLastKnownBgUrl] = useState(''); const transitionVideoRef = useRef(null); const lastInitializedPageIdRef = useRef(null); @@ -347,25 +342,6 @@ export default function RuntimePresentation({ } }, [pendingTransitionComplete, isBackgroundReady]); - // Safari Black Flash Prevention: - // Update lastKnownBgUrl when a background is successfully displayed. - // This creates a "snapshot" that persists through transitions. - useEffect(() => { - if (isBackgroundReady && pageSwitch.isNewBgReady) { - // Prioritize image over video for snapshot (image is more reliable) - if (pageSwitch.currentBgImageUrl) { - setLastKnownBgUrl(pageSwitch.currentBgImageUrl); - } else if (pageSwitch.currentBgVideoUrl) { - // For video backgrounds, we can't easily snapshot, so keep the last image - // The video element itself provides visual continuity - } - } - }, [ - isBackgroundReady, - pageSwitch.isNewBgReady, - pageSwitch.currentBgImageUrl, - pageSwitch.currentBgVideoUrl, - ]); const navigateToPage = useCallback( async ( @@ -576,24 +552,6 @@ export default function RuntimePresentation({ }} > - {/* Safari Black Flash Prevention: - Persistent snapshot layer that NEVER gets removed during transitions. - Shows the last successfully displayed background, ensuring we never - see the black outer container during page switches. - z-[-1] keeps it behind all dynamic content layers. */} - {lastKnownBgUrl && isSafari() && ( -
- )} - {/* Page background wrapper - z-5 keeps it BELOW carousel slide (z-10). Fades in for non-transition navigation. Uses shared CanvasBackground component for single source of truth with constructor (same transitions, same structure). */} @@ -622,6 +580,7 @@ export default function RuntimePresentation({
{/* End page background wrapper */} + {/* Page elements wrapper - z-[46] keeps it ABOVE carousel slide (z-10) AND carousel controls (z-45). UI controls (z-50) remain on top. Fades in together with background. */}