Page image shows empty areas (heatmap, live, page review)

Area: Tracking snippet · Updated: 3 Nov 2026 · Auf Deutsch · All articles

Symptoms

  • Whole sections are missing from the page image of the heatmap, the page review or a live tile: only the page background shows, often below the first screen.
  • Some headlines are cut off, a highlighted word with a colour gradient is missing.
  • Everything is there on the real website; the sections fade in there while scrolling (fade-in, slide-up).

Cause

  • Many websites only show sections once they scroll into view (Framer Motion, GSAP, Webflow interactions, AOS, WOW, Elementor). Until then they are invisible. A page image taken before that shows them invisible: the first frame of a recorded visit (the visitor has not scrolled yet) or a capture during which a fade-in was still running.
  • Words with a colour gradient (text with background-clip) lost their gradient when captured until 3 Nov 2026 and turned transparent.
  • Since 3 Nov 2026 X3 scrolls through the whole page when capturing, waits for fade-ins and images, and shows faded-in sections visible in every page image. Page images X3 captured before stay as they are until captured again.

How to fix it

1. Look at the page images of the page

  • In the dashboard: Growth Intelligence › Settings › Recordings & heatmaps › Page snapshots
  • With Claude (MCP): behavior_snapshots_list {"project":"my-shop","page":"/pricing"}

Source crawler is a capture by X3, recording the first frame of a recorded visit. A page image marked degraded deviates slightly from the page.

2. Capture the page again

  • In the dashboard: Growth Intelligence › Settings › Recordings & heatmaps › Page snapshots › Recapture
  • With Claude (MCP): behavior_snapshot_recapture {"project":"my-shop","page":"/pricing"}

Also right on the page map below the image: „Re-capture page image“. The capture runs in the background, about one minute per page and width; runs_get with the id from the answer shows its progress.

3. Check the result

  • In the dashboard: Growth Intelligence › Behavior › Pages › the page
  • With Claude (MCP): behavior_heatmap_image {"project":"my-shop","page":"/pricing","layer":"scroll"}

The image shows the page with all sections. Parts the website only shows after a click (menu, quiz step) are states of their own: use „Capture yourself“ for them.

How to tell it worked

  • The page image shows every section of the page, including those that fade in on scroll.
  • Highlighted words with a colour gradient are readable.
  • behavior_snapshots_list shows a new page image with status ok for the page.