fixed safari fade issue

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<string>('');
 
   const transitionVideoRef = useRef<HTMLVideoElement>(null);
   const lastInitializedPageIdRef = useRef<string | null>(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({
           }}
         >
           <BackdropPortalProvider>
-            {/* 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() && (
-              <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).
                 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({
             </div>
             {/* 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. */}