Created
June 18, 2026 11:09
-
-
Save tarik02/956272c178eea492edd8fdc30c9b03fe to your computer and use it in GitHub Desktop.
[Bug]: preview annotation element picker does not work inside iframes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>iframe pick test</title> | |
| <style> | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: system-ui, sans-serif; | |
| } | |
| .split { | |
| display: grid; | |
| grid-template-rows: 1fr 1fr; | |
| min-height: 100%; | |
| } | |
| #outside, | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; | |
| } | |
| .screen { | |
| box-sizing: border-box; | |
| display: grid; | |
| align-content: center; | |
| min-height: 100%; | |
| padding: 32px; | |
| color: var(--text); | |
| background: var(--page); | |
| } | |
| .card { | |
| display: grid; | |
| gap: 12px; | |
| max-width: 420px; | |
| padding: 24px; | |
| background: var(--card); | |
| border: 2px solid var(--border); | |
| border-radius: 8px; | |
| } | |
| h1, | |
| p { | |
| margin: 0; | |
| } | |
| button { | |
| justify-self: start; | |
| padding: 12px 24px; | |
| color: white; | |
| font: inherit; | |
| background: var(--button); | |
| border: 0; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="split"> | |
| <section id="outside" class="screen"></section> | |
| <iframe id="inside" title="iframe pick test"></iframe> | |
| </main> | |
| <script> | |
| const themeCss = (theme) => ` | |
| --page: ${theme.page}; | |
| --card: ${theme.card}; | |
| --border: ${theme.border}; | |
| --button: ${theme.button}; | |
| --text: ${theme.text}; | |
| `; | |
| const cardHtml = ({ title, button, text }) => ` | |
| <div class="card"> | |
| <h1>${title}</h1> | |
| <button type="button">${button}</button> | |
| <p>${text}</p> | |
| </div> | |
| `; | |
| const outside = { | |
| theme: { | |
| page: "#eff6ff", | |
| card: "#dbeafe", | |
| border: "#2563eb", | |
| button: "#2563eb", | |
| text: "#172554", | |
| }, | |
| title: "Outside iframe", | |
| button: "Outside iframe button", | |
| text: "This paragraph is outside the iframe.", | |
| }; | |
| const inside = { | |
| theme: { | |
| page: "#fff7ed", | |
| card: "#ffedd5", | |
| border: "#f97316", | |
| button: "#f97316", | |
| text: "#431407", | |
| }, | |
| title: "Inside iframe", | |
| button: "Inside iframe button", | |
| text: "This paragraph is inside the iframe.", | |
| }; | |
| const pageCss = document.querySelector("style").textContent; | |
| document.querySelector("#outside").style.cssText = themeCss(outside.theme); | |
| document.querySelector("#outside").innerHTML = cardHtml(outside); | |
| document.querySelector("#inside").srcdoc = ` | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <style>${pageCss}</style> | |
| </head> | |
| <body class="screen" style="${themeCss(inside.theme)}"> | |
| ${cardHtml(inside)} | |
| </body> | |
| </html> | |
| `; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment