codesandbox / codesandbox/codesandbox-client
`getDocumentHeight` never reports a smaller value, iframe auto-resize only grows and never shrinks
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- I have read the Contributing Guidelines for this project.
- I agree to follow the Code of Conduct that this project
adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
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 —
sendResizepolling detects no change becausegetDocumentHeight()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);
}
| Software | Name/Version |
|---|---|
| Сodesandbox | Bundler https://2-19-8-sandpack.codesandbox.io/ |
| Browser | Chrome 148.0.7778.168 |
| Operating System | macOS |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/app/src/sandbox/compile.ts and inspect getDocumentHeight together with the sendResize polling path. Reproduce the iframe resize scenario by narrowing the browser window, then adjust the measurement so it can report a smaller content height. Done means the resize message reflects the shorter content instead of retaining the previous iframe height.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100