From c154bb31b72669fb873869a0ee2a33ab9ab06b57 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Mon, 3 Nov 2025 17:58:54 +0530
Subject: [PATCH] fix: Arrows visible when embed has hidden entire page
 (#24868)

---
 apps/web/app/layout.tsx                       | 21 +++++++++++--------
 .../embeds/embed-core/src/embed-iframe.ts     | 19 ++++++++++-------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 94044fd63b..4a70b27a3a 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -125,16 +125,19 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         style={
           isEmbed
             ? {
-                background: "transparent",
-                // Keep the embed hidden till parent initializes and
-                // - gives it the appropriate styles if UI instruction is there.
-                // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
-                // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
-                visibility: "hidden",
-              }
+              background: "transparent",
+              // Keep the embed hidden till parent initializes and
+              // - gives it the appropriate styles if UI instruction is there.
+              // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
+              // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
+              visibility: "hidden",
+              // This in addition to visibility: hidden is to ensure that elements with specific opacity set are not visible
+              opacity: 0,
+            }
             : {
-                visibility: "visible",
-              }
+              visibility: "visible",
+              opacity: 1,
+            }
         }>
         <IconSprites />
         <SpeculationRules
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 66d8c2403f..2758bf5f1a 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -111,15 +111,15 @@ const setEmbedNonStyles = (stylesConfig: EmbedNonStylesConfig) => {
 const registerNewSetter = (
   registration:
     | {
-        elementName: keyof EmbedStyles;
-        setState: SetStyles;
-        styles: true;
-      }
+      elementName: keyof EmbedStyles;
+      setState: SetStyles;
+      styles: true;
+    }
     | {
-        elementName: keyof EmbedNonStylesConfig;
-        setState: setNonStylesConfig;
-        styles: false;
-      }
+      elementName: keyof EmbedNonStylesConfig;
+      setState: setNonStylesConfig;
+      styles: false;
+    }
 ) => {
   // It's possible that 'ui' instruction has already been processed and the registration happened due to some action by the user in iframe.
   // So, we should call the setter immediately with available embedStyles
@@ -286,6 +286,9 @@ function makeBodyVisible() {
   if (document.body.style.visibility !== "visible") {
     document.body.style.visibility = "visible";
   }
+  if (document.body.style.opacity !== "1") {
+    document.body.style.opacity = "1";
+  }
   // Ensure that it stays visible and not reverted by React
   runAsap(() => {
     makeBodyVisible();