Common CSS issues

When playing visitor recordings, recordings might show a page with a defective layout, either devoid of styles, partially unstyled, or missing certain elements, such as images, which can be caused by several factors. Below are the most common.

Debugging an issue

When you play a recording, Smartlook uses proxies to access your assets (such as CSS stylesheets) and load the data so the recordings can show styles.

In order for a recording to show the correct layout of the page, when you open the browser’s Developer Tools, you can see the CSS assets that are being retrieved.

And whenever there’s an issue with retrieving some of the assets, you can see the affected asset highlighted (1), as well as an error message in the browser console (2).

Changes in your CSS

When you make changes in your CSS, older recordings can start to display the new style, because when you play the recording, the Smartlook proxy accesses your assets and retrieves the current version of your CSS stylesheet.

The solution to this is to create a new stylesheet when you launch a new version of your CSS and keep the stylesheets with the older version. This way, when you play old recordings, Smartlook will retrieve the old version of the CSS from the older stylesheet. When you play more recent recordings, Smartlook will retrieve the styles from your newest version.

Dynamic CSS

Another common scenario is using a dynamic CSS, in which temporary stylesheets are generated, so when you access the page on a different date, the stylesheet may have expired. Then, what you are seeing is the styling from a new stylesheet.

The Smartlook proxies, however, retrieve the data from the active spreadsheet at the time the recording was made, so if you have temporary CSS files and these happen to have expired, this will cause the recordings to break after a certain period of time, given that the proxies can no longer access the expired CSS files. This is accompanied by an error in the CSS request.

The solution for this is to keep the older files so that the Smartlook proxies can still have access to those assets. You can contact us and request us to enable the automatic caching of assets for your account.

CORS restrictions

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page (e.g., fonts) to be requested from another domain outside the domain from which the first resource was served. A web page can freely embed cross-origin images, stylesheets, scripts, iframes, and videos.

When the Smartlook proxies make a successful CSS request to your servers, the response includes a special header called an Access-Control-Allow-Origin response with a value of * (wildcard), which means that this resource can be requested by all domains.

When a resource lacks this, it cannot be requested by other domains, so the request made by the Smartlook proxy to your server is unsuccessful, and the player will not render this data in the recording. You will see an error message in your console that looks like this:

In order to solve this, you need to check your security settings and enable this header by allowing the CORS. Alternatively, you can also use an extension like this, which automatically adds “Access-Control-Allow-Origin: *” to the response header rule.

Did this answer your question?