diff --git a/.claude/skills/web-test/scripts/browser.mjs b/.claude/skills/web-test/scripts/browser.mjs index a4dff8ad..dc175f50 100644 --- a/.claude/skills/web-test/scripts/browser.mjs +++ b/.claude/skills/web-test/scripts/browser.mjs @@ -4213,8 +4213,7 @@ export async function showTitleSlide(text, opts = {}) { await page.evaluate(({ text, subtitle, background, color, fontSize }) => { let div = document.getElementById('__web_test_title'); - const isNew = !div; - if (isNew) { + if (!div) { div = document.createElement('div'); div.id = '__web_test_title'; document.body.appendChild(div); @@ -4224,15 +4223,16 @@ export async function showTitleSlide(text, opts = {}) { `background:${background}`, 'display:flex', 'align-items:center', 'justify-content:center', 'z-index:999999', 'pointer-events:none', - 'transition:opacity 0.3s ease', isNew ? 'opacity:0' : '' ].join(';'); + // Remove other overlays to prevent flash between slides + const img = document.getElementById('__web_test_image'); + if (img) img.remove(); const esc = s => s.replace(/&/g, '&').replace(/'); let html = `
${esc(text)}
`; if (subtitle) { html += `
${esc(subtitle)}
`; } div.innerHTML = `
${html}
`; - if (isNew) requestAnimationFrame(() => { div.style.opacity = '1'; }); }, { text, subtitle, background, color, fontSize }); // Smart TTS wait (same pattern as showCaption/showImage) @@ -4248,22 +4248,13 @@ export async function showTitleSlide(text, opts = {}) { } } -/** Remove the title slide overlay (with fade-out). */ +/** Remove the title slide overlay. */ export async function hideTitleSlide() { ensureConnected(); - const exists = await page.evaluate(() => { + await page.evaluate(() => { const el = document.getElementById('__web_test_title'); - if (!el) return false; - el.style.opacity = '0'; - return true; + if (el) el.remove(); }); - if (exists) { - await page.waitForTimeout(350); - await page.evaluate(() => { - const el = document.getElementById('__web_test_title'); - if (el) el.remove(); - }); - } } /** @@ -4337,18 +4328,20 @@ export async function showImage(imagePath, opts = {}) { await page.evaluate(({ dataUrl, fit, bg, useBlur, shadow, maxSize, isFull }) => { let div = document.getElementById('__web_test_image'); - const isNew = !div; - if (isNew) { + if (!div) { div = document.createElement('div'); div.id = '__web_test_image'; document.body.appendChild(div); } + // Remove other overlays to prevent flash between slides + const title = document.getElementById('__web_test_title'); + if (title) title.remove(); + div.style.cssText = [ 'position:fixed', 'top:0', 'left:0', 'width:100%', 'height:100%', `background:${bg}`, 'display:flex', 'align-items:center', 'justify-content:center', - 'z-index:999999', 'pointer-events:none', 'overflow:hidden', - 'transition:opacity 0.3s ease', isNew ? 'opacity:0' : '' + 'z-index:999999', 'pointer-events:none', 'overflow:hidden' ].join(';'); let html = ''; @@ -4366,7 +4359,6 @@ export async function showImage(imagePath, opts = {}) { html += ``; div.innerHTML = html; - if (isNew) requestAnimationFrame(() => { div.style.opacity = '1'; }); }, { dataUrl, fit, bg, useBlur, shadow, maxSize, isFull }); // Smart TTS wait (same pattern as showCaption) @@ -4382,22 +4374,13 @@ export async function showImage(imagePath, opts = {}) { } } -/** Remove the image overlay (with fade-out). */ +/** Remove the image overlay. */ export async function hideImage() { ensureConnected(); - const exists = await page.evaluate(() => { + await page.evaluate(() => { const el = document.getElementById('__web_test_image'); - if (!el) return false; - el.style.opacity = '0'; - return true; + if (el) el.remove(); }); - if (exists) { - await page.waitForTimeout(350); - await page.evaluate(() => { - const el = document.getElementById('__web_test_image'); - if (el) el.remove(); - }); - } } /**