Published artifact fails to scroll (wheel/trackpad) when opened full-page, but works fine embedded in the session side panel
Open 💬 0 comments Opened Jul 15, 2026 by kenneth0227
Summary
A published Artifact (long-form HTML report, no JavaScript) cannot be scrolled via mouse wheel / trackpad when opened as a full page — either via the in-app Artifacts gallery, or via the same claude.ai/code/artifact/... URL opened directly in Safari. The exact same content scrolls normally when displayed embedded in the session's side panel.
Symptom
- Mouse wheel / trackpad scroll gestures have no effect on the page.
- Click-and-drag text selection to the viewport edge still triggers native auto-scroll.
- Once auto-scroll (or a scrollbar) appears, dragging the scrollbar thumb directly works.
- This suggests wheel/trackpad scroll events specifically are being intercepted or not propagated, while other scroll mechanisms remain functional.
Reproduction
- Publish any sufficiently long HTML artifact (multi-section report, ~15KB+, no
<script>tags). - Open it full-page via either:
- Claude Code desktop app → Code tab → Artifacts → click the card, or
- Directly navigating to
https://claude.ai/code/artifact/<id>in a regular browser (tested in Safari).
- Try scrolling with a trackpad/mouse wheel — no response.
- Open the same artifact embedded in an active session's side panel instead — scrolling works normally.
What we ruled out
While diagnosing, we isolated the cause down to the full-page viewer itself, not the artifact content:
- Removed the report's own
Content-Security-Policy/referrer-policy<meta>tags in case they conflicted with the platform's own CSP — no change. - Tested a minimal plain-text artifact (no CSS at all) — scrolled fine.
- Tested minimal content + an
overflow-x:autowrapped<table>(same pattern used in the real report) — scrolled fine. - Tested the real report's full
<style>block (CSS custom properties,prefers-color-scheme/data-themeoverrides, flex layout,color-mix()) with minimal placeholder content — scrolled fine. - Tested the real report's full content with its two largest tables (30+ rows) removed — still failed to scroll.
- Key finding: the exact same full-content artifact scrolls normally in the session side-panel view, but not in the full-page view (app gallery or Safari). This isolates the bug to the full-page artifact viewer's scroll-event handling, not the artifact's HTML/CSS.
Environment
- Claude Code desktop app (macOS), plus reproduced independently in Safari on macOS via the direct
claude.ai/code/artifact/...URL. - Artifact had zero
<script>tags — purely static HTML/CSS.