Chromatic waits for resources like images and fonts to load before capturing a snapshot. When resources fail to load it leads to unintended UI changes.
The maximumn time to capture a snapshot is 15 seconds. If the resources fail to load in the allotted time, Chromatic will retry. After several retries, the snapshot will be captured anyway and a warning message will be displayed.
Avoid external resources
It’s tough to predict network stability third-party hosting reliability. These factors mean external resources might not load predictably and affect your snapshots.
Our browsers monitor network activity that occurs while your story renders. If your story renders after a delay (i.e. asyncronously), there is no way for us to tell what happened. Thus, we can’t reliably wait for subsequent resources to be loaded asynchronously.
If you know how long async rendering takes, you can add a delay to avoid snapshotting until after that happens. But it can be difficult to reliably set a time that network resources will load within so you may have to add/subtract seconds to the delay.
We are investigating ways to add first-class support to Storybook and Chromatic for asynchronous rendering. Let us know if you need this feature by chat or email.
Chromatic attempts to render as consistently as possible across our supported browsers. But all browsers have different capabilities that are worth mentioning here.
Chrome gives us full access to network APIs. That means we can confirm when resources load with greater accuracy. In a nutshell, your snapshots are more consistent. In Chrome, we render your story via a Storybook JS API, and then watch network activity, waiting for quiescence (a period of no network activity) before capturing a snapshot.
Firefox and Internet Explorer have built in APIs to tell when assets are loaded. In practice, these APIs are less nuanced than Chrome which may affect your snapshots. In Firefox and IE11, we browse to a Storybook URL that renders your story, then wait for the browser “load” event in addition to our own heuristics to determine when the story finishes rendering.
The above can behave differently if your page loads resources (such as JS files) via techniques that aren’t picked up by the load event (such as AJAX / background requests).