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

  1. Publish any sufficiently long HTML artifact (multi-section report, ~15KB+, no <script> tags).
  2. 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).
  1. Try scrolling with a trackpad/mouse wheel — no response.
  2. 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:auto wrapped <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-theme overrides, 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.

View original on GitHub ↗