From 859be3f80f1ef78ef6c8b7ead2ef1ed3cf75ab65 Mon Sep 17 00:00:00 2001 From: Karishma Shukla Date: Mon, 30 Jun 2025 14:52:02 +0530 Subject: [PATCH] fix: simplify dom render + use minimal css for iframe --- .../recorder/DOMBrowserRenderer.tsx | 112 ++++-------------- 1 file changed, 25 insertions(+), 87 deletions(-) diff --git a/src/components/recorder/DOMBrowserRenderer.tsx b/src/components/recorder/DOMBrowserRenderer.tsx index a7cc2d26..a297592f 100644 --- a/src/components/recorder/DOMBrowserRenderer.tsx +++ b/src/components/recorder/DOMBrowserRenderer.tsx @@ -789,97 +789,35 @@ export const DOMBrowserRenderer: React.FC = ({ let rebuiltHTML = tempDoc.documentElement.outerHTML; rebuiltHTML = "\n" + rebuiltHTML; + + const minimalCSS = ` + + `; - const additionalCSS = []; - - if (snapshotData.resources.fonts?.length > 0) { - const fontCSS = snapshotData.resources.fonts - .map((font) => { - const format = font.format || "woff2"; - return ` - @font-face { - font-family: 'ProxiedFont-${ - font.url.split("/").pop()?.split(".")[0] || - "unknown" - }'; - src: url("${font.dataUrl}") format("${format}"); - font-display: swap; - } - `; - }) - .join("\n"); - additionalCSS.push(fontCSS); - } - - if (snapshotData.resources.stylesheets?.length > 0) { - const externalCSS = snapshotData.resources.stylesheets - .map((stylesheet) => stylesheet.content) - .join("\n\n"); - additionalCSS.push(externalCSS); - } - - const enhancedCSS = ` - /* rrweb rebuilt content styles */ - html, body { - margin: 0 !important; - padding: 8px !important; - font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; - background: white !important; - overflow-x: hidden !important; - } - - html::-webkit-scrollbar, - body::-webkit-scrollbar { - display: none !important; - width: 0 !important; - height: 0 !important; - background: transparent !important; - } - - /* Hide scrollbars for all elements */ - *::-webkit-scrollbar { - display: none !important; - width: 0 !important; - height: 0 !important; - background: transparent !important; - } - - * { - scrollbar-width: none !important; /* Firefox */ - -ms-overflow-style: none !important; /* Internet Explorer 10+ */ - } - - img { - max-width: 100% !important; - height: auto !important; - } - - /* Make everything interactive */ - * { - cursor: "pointer" !important; - } - - /* Additional CSS from resources */ - ${additionalCSS.join("\n\n")} - `; - - const headTagRegex = /]*>/i; - const cssInjection = ` - - - - - `; - - if (headTagRegex.test(rebuiltHTML)) { + if (rebuiltHTML.includes("")) { rebuiltHTML = rebuiltHTML.replace( - headTagRegex, - `${cssInjection}` + "", + `${minimalCSS}` ); - } else { + } else if (rebuiltHTML.includes("")) { rebuiltHTML = rebuiltHTML.replace( - /]*>/i, - `${cssInjection}` + "", + `${minimalCSS}` ); }