vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #670 from getmaxun/dom-ui-fix

Browse Source 
fix: simplify dom render + use minimal css for iframe
This commit is contained in:
Karishma Shukla
2025-07-07 00:44:03 +05:30
committed by GitHub
parent a75471cb31 859be3f80f
commit c572c6b76a
1 changed files with 25 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/recorder/DOMBrowserRenderer.tsx
View File

@@ -789,97 +789,35 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
let rebuiltHTML = tempDoc.documentElement.outerHTML;
rebuiltHTML = "<!DOCTYPE html>\n" + rebuiltHTML;
const minimalCSS = `
<style>
/* Minimal styles - don't override too much */
html, body {
margin: 0;
padding: 8px;
overflow-x: hidden;
}
/* Hide scrollbars but keep functionality */
::-webkit-scrollbar { width: 0px; background: transparent; }
body { scrollbar-width: none; -ms-overflow-style: none; }
/* Prevent form submissions and navigation */
form { pointer-events: none; }
a[href] { pointer-events: ${isInCaptureMode ? "none" : "auto"}; }
</style>
`;
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 = /<head[^>]*>/i;
const cssInjection = `
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="${snapshotData.baseUrl}">
<style>${enhancedCSS}</style>
`;
if (headTagRegex.test(rebuiltHTML)) {
if (rebuiltHTML.includes("<head>")) {
rebuiltHTML = rebuiltHTML.replace(
headTagRegex,
`<head>${cssInjection}`
"<head>",
`<head><base href="${snapshotData.baseUrl}">${minimalCSS}`
);
} else {
} else if (rebuiltHTML.includes("<html>")) {
rebuiltHTML = rebuiltHTML.replace(
/<html[^>]*>/i,
`<html><head>${cssInjection}</head>`
"<html>",
`<html><head><base href="${snapshotData.baseUrl}">${minimalCSS}</head>`
);
}