From 99494348bf8e944993bbb0f3553449bf9f1a9926 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 02:05:22 -0700 Subject: [PATCH] fix(live): don't pass backgroundColor to domToBlob modern-screenshot force-sets `background-color: X !important` on the root clone's inline style when backgroundColor is passed, clobbering the element's real background and rendering every captured card with the page body color. Omit the option so the canvas stays transparent and the element's own background renders into the foreignObject. Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/scripts/live-browser.js | 6 +++++- .claude/skills/impeccable/scripts/live-browser.js | 6 +++++- .cursor/skills/impeccable/scripts/live-browser.js | 6 +++++- .gemini/skills/impeccable/scripts/live-browser.js | 6 +++++- .github/skills/impeccable/scripts/live-browser.js | 6 +++++- .kiro/skills/impeccable/scripts/live-browser.js | 6 +++++- .opencode/skills/impeccable/scripts/live-browser.js | 6 +++++- .pi/skills/impeccable/scripts/live-browser.js | 6 +++++- .rovodev/skills/impeccable/scripts/live-browser.js | 6 +++++- .trae-cn/skills/impeccable/scripts/live-browser.js | 6 +++++- .trae/skills/impeccable/scripts/live-browser.js | 6 +++++- source/skills/impeccable/scripts/live-browser.js | 6 +++++- 12 files changed, 60 insertions(+), 12 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally { diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 46797a8b3..7915f88f0 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -1787,9 +1787,13 @@ try { const ms = await loadModernScreenshot(); const fontCssText = await collectFontCssText(); + // Deliberately no `backgroundColor` option. modern-screenshot force-sets + // `background-color: X !important` on the root clone's inline style when + // that option is passed, clobbering the element's real background. Leave + // the canvas transparent; the element's own background renders into the + // foreignObject. return await ms.domToBlob(el, { scale: Math.min(window.devicePixelRatio || 1, 2), - backgroundColor: getComputedStyle(document.body).backgroundColor || '#ffffff', font: fontCssText ? { cssText: fontCssText } : undefined, }); } finally {