🐛 bug report
Preflight Checklist
Description of the problem
getDocumentHeight() in packages/app/src/sandbox/compile.ts includes html.offsetHeight in its Math.max:
function getDocumentHeight() {
const { body } = document;
const html = document.documentElement;
return Math.max(body.scrollHeight, body.offsetHeight, html.offsetHeight);
}Since <html> fills the iframe, html.offsetHeight always equals the iframe's current height. Once the iframe grows (e.g. to 1098px), getDocumentHeight() can never return a smaller value — the measurement is self-referencing. This means the { type: 'resize', height } message dispatched to the parent will never report a decrease in content height.
How has this issue affected you? What are you trying to accomplish?
We embed Sandpack previews in a chat UI where the iframe should match content height exactly (no scrollbar). When the user resizes their browser to a narrower width, the content reflows and becomes shorter, but the iframe stays at its previous (taller) height, leaving empty space below the content.
To Reproduce
- Embed a
<SandpackPreview> with no fixed height (relying on auto-resize)
- Let the content render — iframe grows to match content (e.g. 1098px)
- Resize the browser window to a smaller width
- Content reflows responsively and becomes shorter (e.g. 600px)
- Expected: iframe shrinks to ~600px
- Actual: iframe stays at 1098px —
sendResize polling detects no change because getDocumentHeight() still returns 1098
Suggested fix
Exclude html.offsetHeight from the measurement, or temporarily set html.style.height = '0' / 'auto' before measuring:
function getDocumentHeight() {
const { body } = document;
return Math.max(body.scrollHeight, body.offsetHeight);
}
🐛 bug report
Preflight Checklist
adheres to.
to file, without success.
Description of the problem
getDocumentHeight()inpackages/app/src/sandbox/compile.tsincludeshtml.offsetHeightin itsMath.max:Since
<html>fills the iframe,html.offsetHeightalways equals the iframe's current height. Once the iframe grows (e.g. to 1098px),getDocumentHeight()can never return a smaller value — the measurement is self-referencing. This means the{ type: 'resize', height }message dispatched to the parent will never report a decrease in content height.How has this issue affected you? What are you trying to accomplish?
We embed Sandpack previews in a chat UI where the iframe should match content height exactly (no scrollbar). When the user resizes their browser to a narrower width, the content reflows and becomes shorter, but the iframe stays at its previous (taller) height, leaving empty space below the content.
To Reproduce
<SandpackPreview>with no fixed height (relying on auto-resize)sendResizepolling detects no change becausegetDocumentHeight()still returns 1098Suggested fix
Exclude
html.offsetHeightfrom the measurement, or temporarily sethtml.style.height = '0'/'auto'before measuring: