From 7ea063390db57901c645aa6446fdbb15ca6c5708 Mon Sep 17 00:00:00 2001
From: Dmitri <dtroshchenkov@gmail.com>
Date: Thu, 16 Apr 2026 10:11:54 +0400
Subject: [PATCH] fixed z-index for safari

---
 .../src/components/RuntimePresentation.tsx    | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/RuntimePresentation.tsx b/frontend/src/components/RuntimePresentation.tsx
index c13a51a..6392676 100644
--- a/frontend/src/components/RuntimePresentation.tsx
+++ b/frontend/src/components/RuntimePresentation.tsx
@@ -351,19 +351,13 @@ export default function RuntimePresentation({
   }, [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.
+  // Update lastKnownBgUrl whenever we have a valid background image.
+  // This ensures snapshot is always ready before transitions start.
   useEffect(() => {
-    if (isBackgroundReady && pageSwitch.isNewBgReady) {
-      if (pageSwitch.currentBgImageUrl) {
-        setLastKnownBgUrl(pageSwitch.currentBgImageUrl);
-      }
+    if (pageSwitch.currentBgImageUrl) {
+      setLastKnownBgUrl(pageSwitch.currentBgImageUrl);
     }
-  }, [
-    isBackgroundReady,
-    pageSwitch.isNewBgReady,
-    pageSwitch.currentBgImageUrl,
-  ]);
+  }, [pageSwitch.currentBgImageUrl]);
 
   const navigateToPage = useCallback(
     async (
@@ -577,14 +571,13 @@ export default function RuntimePresentation({
             {/* 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. */}
+                z-[1] keeps it behind backgrounds (z-5) but above the black container. */}
             {lastKnownBgUrl &&
               isSafari() &&
               (transitionPreview || pendingTransitionComplete) && (
                 <div
-                  className='absolute inset-0 pointer-events-none'
+                  className='absolute inset-0 z-[1] pointer-events-none'
                   style={{
-                    zIndex: -1,
                     backgroundImage: `url("${lastKnownBgUrl}")`,
                     backgroundSize: 'contain',
                     backgroundPosition: 'center',