Why styles can be missing

Session replay reconstructs the page from recorded DOM and asset information. If stylesheets or assets cannot be loaded when the replay is viewed, the page may look unstyled or incomplete.

Common causes include:

• CSS files blocked by authentication
• temporary asset URLs that expired
• Content Security Policy restrictions
• assets blocked by CORS or hotlink protection
• styles loaded only after user-specific scripts run
• staging assets unavailable from the dashboard

Private or authenticated assets

If CSS files require login to access, UserTrail may not be able to load them during replay. The visitor saw the styles because they were authenticated, but the replay viewer may not have access to those same files.

Use publicly reachable stylesheets for pages you want to replay, or ensure the recorded replay includes enough styling information.

Content Security Policy

Content Security Policy can block styles, fonts, images, or scripts used by replay.

Check browser developer tools while viewing the replay. CSP errors usually appear in the console and mention the blocked resource.

If CSP is the cause, update your policy carefully. Do not weaken security broadly; allow only the required UserTrail and asset sources.

Expired asset URLs

Some websites generate short-lived URLs for CSS, images, or fonts. If those URLs expire before the replay is viewed, the replay can lose styling.

This is common with signed URLs or private CDN assets.

Use stable public asset URLs for styles needed by recorded pages.

Fonts and images

Missing fonts can make text spacing look different. Missing images can change layout size or hide important visual context.

If fonts or images fail to load in replay:

• check whether they are publicly reachable
• check CORS or hotlink settings
• check whether the URLs expire
• check CSP font and image rules

How to diagnose missing styles

Open the replay and use browser developer tools:

1. Check the Console for CSP or CORS errors.
2. Check the Network tab for failed CSS, font, or image requests.
3. Open failed asset URLs directly.
4. Compare a live page with the replay.
5. Check whether assets require authentication.

Fix checklist

• Make required stylesheets accessible.
• Avoid short-lived CSS URLs for tracked pages.
• Review CSP rules.
• Check CORS and CDN hotlink protection.
• Confirm assets are available from production, not only staging.
• Test a new recording after changes.