Artifacts: page fails to scroll on first load in Safari; fixed by switching the version picker
Summary
An HTML Artifact whose content is taller than one viewport doesn't scroll on first load in Safari (macOS). Scrolling only starts working after using the artifact's version picker to switch versions — even reselecting the same version fixes it. That symptom points to a race in the host's iframe height/scroll measurement on first paint, not a bug in the artifact's own CSS.
Steps to reproduce
- Publish an HTML artifact whose content is taller than the viewport (a long-form document/report reproduces it reliably).
- Open the resulting artifact link in Safari on macOS.
- Try to scroll — trackpad/mouse-wheel scrolling does nothing; there is no way to reach content below the fold.
- Use the artifact's version picker to switch to a different version, or reselect the current version.
- Scrolling now works normally, for every version, including the one that failed in step 3.
What was ruled out on the artifact side
- No
overflow-x: hidden/overflow: hiddenonhtmlorbody, no fixed heights, noposition: fixed, no<table>elements, notransform/containrules that would clip content. - Explicitly setting
html, body { height: auto; min-height: 100%; overflow-y: auto; }had no effect. - A JS mitigation — forcing a reflow (
document.body.offsetHeight) and dispatching aresizeevent a couple ofrequestAnimationFrames afterwindow.onload(plus a 300mssetTimeoutfallback) — had no effect either.
This suggests the fix needs to happen on the host/iframe side (whatever measures content height to enable scrolling on first render), not something an artifact author can work around from HTML/CSS/JS.
Expected behavior
The page should scroll normally on first load in Safari without requiring any interaction with the version picker.
Environment
- Browser: Safari on macOS
- Reproduced consistently across multiple redeploys of the same artifact
This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗