fix: Arrows visible when embed has hidden entire page (#24868)

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

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();