When a heatmap or session is being recorded, Matomo tries to save a webpage’s CSS (Cascading Style Sheets define the design of your website) along with the content of a webpage to ensure the page is still displayed correctly even if the CSS or the URLs to your CSS change.

For this feature to work, Matomo tries to read the CSS. If it can’t read the CSS from the DOM, then it tries to fetch the content using an extra HTTP request. This will work in most cases. However, in some cases, for example when you load your CSS from a CDN, then extra steps are needed.

If your heatmap or session recording displays correctly after taking the screenshot or recording, but doesn’t look good anymore after a while, then this might be causing the problem.

To fix this error, follow these steps:

  • Recommended: For Matomo to not having to make an additional HTTP request to fetch the CSS, set a crossorigin attribute on your link tag to anonymous. This will make it a lot faster for Matomo to get the CSS content. Example:
<link rel="stylesheet" href="{PATH_TO_YOUR_CSS_FILE}" crossorigin="anonymous">
  • Ensure a header is set Access-Control-Allow-Origin: {YOUR_DOMAIN} when your webpages are being requested. This will allow Matomo to load the CSS using an HTTP request. Example: If https://www.example.com is your Matomo tracking domain, then you need to set the header as Access-Control-Allow-Origin: https://www.example.com. To change this header, ask your system administrator or your hoster for help if needed. The header needs to be only set for CSS files.
Previous FAQ: How do I apply custom stylesheets when a heatmap is generated or a session recording replayed?