Onur Kansoy
Fix: Implement pure CSS @keyframes for theater transition timeline to resolve Safari/WebKit Javascript opacity bugs and lock bounding box to prevent HF Space overflow
6a985f4 verified | <html> | |
| <head> | |
| <style> | |
| body { background: white; margin: 0; height: 100vh; } | |
| </style> | |
| </head> | |
| <body> | |
| <button onclick="injectTitle('Test Title')">Click</button> | |
| <script> | |
| window.injectTitle = (titleText) => { | |
| let old = document.getElementById("native-title-overlay"); | |
| if(old) old.remove(); | |
| const div = document.createElement("div"); | |
| div.id = "native-title-overlay"; | |
| div.style.cssText = "position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;"; | |
| div.innerHTML = ` | |
| <div id="native-bg" style="position:absolute;inset:0;background:#0a0508;opacity:0;transition:opacity 0.8s ease;z-index:1;"></div> | |
| <h1 id="native-text" style="position:relative;z-index:10;color:#c9a227;font-size:4em;text-align:center;padding:40px;transform:translateY(-20vh);opacity:0;filter:blur(10px);transition:all 1.5s ease;text-shadow:0 0 40px rgba(201,162,39,0.5);font-family:'IM Fell English',serif;">${titleText}</h1> | |
| `; | |
| document.body.appendChild(div); | |
| const bg = document.getElementById("native-bg"); | |
| const txt = document.getElementById("native-text"); | |
| setTimeout(() => { if(bg) bg.style.opacity = '1'; }, 2400); | |
| setTimeout(() => { if(txt) { txt.style.opacity = '1'; txt.style.filter = 'blur(0px)'; } }, 3000); | |
| setTimeout(() => { if(txt) { txt.style.opacity = '0'; txt.style.filter = 'blur(10px)'; } }, 5500); | |
| setTimeout(() => { if(bg) bg.style.opacity = '0'; }, 6500); | |
| setTimeout(() => { div.remove(); }, 7500); | |
| }; | |
| injectTitle('Automatic Title'); | |
| </script> | |
| </body> | |
| </html> | |