diff --git a/src/components/recorder/DOMBrowserRenderer.tsx b/src/components/recorder/DOMBrowserRenderer.tsx index a7cc2d26..82c93d92 100644 --- a/src/components/recorder/DOMBrowserRenderer.tsx +++ b/src/components/recorder/DOMBrowserRenderer.tsx @@ -790,96 +790,34 @@ export const DOMBrowserRenderer: React.FC = ({ rebuiltHTML = "\n" + rebuiltHTML; - const additionalCSS = []; + const minimalCSS = ` + + `; - 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}` ); }