Issue with Session Replay Rendering (Page Appears Without CSS)

This behavior is expected when Clarity cannot correctly load your site’s styling assets (CSS, fonts, sometimes images) during playback. In that case, recordings look like plain or “old” HTML with overlapping elements, even though the live site is fine.

Key points and recommendations:

1. Known limitation of session replay
   • Clarity replays depend on being able to fetch your site’s CSS, fonts, and other styling resources. If these resources are blocked or unavailable, recordings and heatmaps render without styling or with old styling.
   • Some recordings may also look broken or have missing images if Clarity has difficulty locating CSS, fonts, or images.
2. Why CSS/JS may fail to render in playback Common causes include:
   • Styling resources are not publicly accessible (for example, only on production servers, localhost, intranet).
   • Your site blocks Clarity from fetching resources (for example, IP restrictions, geolocation rules, domain/referrer rules, or CSP blocking Clarity domains).
   • Stylesheets or fonts are temporary or expire quickly.
   • Resources are served with an incorrect content type, so Clarity does not treat them as stylesheets/fonts.
   • For inline players, HTTP sites can cause rendering issues.
3. Recommended configuration and checks
   • Ensure all CSS and font files used by the pages you analyze are publicly reachable from the internet.
   • If you use a Content Security Policy (CSP), add Clarity to the allowed sources, preferably in default-src, for example:
     • default-src 'self' https://*.clarity.ms https://c.bing.com 'unsafe-inline';
   • Allow requests that contain the header User-Agent: Clarity-Bot and ensure no firewall/WAF or IP/geo rules block Clarity from fetching your assets.
   • Make CSS and font URLs stable and long-lived; avoid temporary URLs that expire.
   • Serve CSS and font files with the correct MIME types so they are recognized as stylesheets/fonts.
   • Prefer HTTPS for your site to reduce layout issues in the inline player.
4. When issues persist
   • If the above steps do not resolve the problem, capture one or more affected recordings/heatmaps and send a support request to the Clarity team, including:
     • Links to the problematic recording(s) or heatmap(s).
     • A list of resource URLs (CSS, fonts, images) that appear to fail loading in the browser developer tools.

References:

• Troubleshooting Recordings
• Troubleshooting Heatmaps (or Heat maps)
• Inline Player
• Inline player for Clarity Mobile Apps
• Clarity Content Security Policy