RCT-2097: Storybook scroll fix

Supernova-Studio · Apr 25, 2024 · 43d7960 · 43d7960
1 parent 42db648
commit 43d7960
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/exporter.json b/exporter.json
@@ -6,7 +6,7 @@
   "organization": "Supernova",
   "source_dir": "src",
   "assets_dir": "assets",
-  "version": "4.11.1",
+  "version": "4.11.3",
   "usesBrands": false,
   "config": {
     "sources": "sources.json",

diff --git a/src/page_body/structure/blocks/page_block_embed_storybook.pr b/src/page_body/structure/blocks/page_block_embed_storybook.pr
@@ -6,15 +6,24 @@
   <div class="content-block content-block--embed">
     <div class="storybook-container" style="height: {{ (block.size && block.size.height) ? block.size.height : 500 }}px">
         <div class="storybook-embed-container">
+            {* Iframe in iframe was used to prevent controlling scroll of parent window from iframe. *}
+            {* This is a hack bacause it's a Chrome bug exploit and can become broken in some time *}
+            {* More info: https://stackoverflow.com/a/71434176 *}
             <iframe
-                class="embed-responsive-item storybook"
-                src="{{ block.url }}"
-                allowfullscreen
-                loading="lazy"
-                aria-label="Embedded Storybook"
-                referrerpolicy="origin"
+                class="embed-responsive-item"
                 style="height: {{ (block.size && block.size.height && block.size.height < 150) ? block.size.height + "px" : "100%" }}"
-            ></iframe>
+                srcdoc="
+                    <iframe
+                        class='embed-responsive-item storybook'
+                        src='{{ block.url }}'
+                        allowfullscreen
+                        loading='lazy'
+                        aria-label='Embedded Storybook'
+                        referrerpolicy='origin'
+                        style='position: fixed; top: 0; width: 100vw; height: 100vh; border: none; padding: 0; margin: 0; '
+                    ></iframe>
+                ">
+            </iframe>
         </div>
         <div class="storybook-error">
             <span>{{ storybookError ? storybookError : "Storybook failed to load. Please connect to the VPN to access." }}</span>