Capture 8 is now available
Automatic Shadow DOM support and better handling of out-of-root elements
We regularly update the Chromatic Capture Cloud infrastructure to upgrade browsers, fix bugs and introduce new features. The latest version—Capture 8—is now available to all users.
This release includes automatic Shadow DOM support, improved handling of out-of-root elements, consistent pausing of infinite animations, and a new CSS class for targeting the Chromatic environment. Read on for more details.
Automatic shadow DOM support
Modern UI libraries are increasingly using Shadow DOM to encapsulate styles and markup. Previously, Chromatic required extra Storybook configuration to capture these Shadow DOM elements, which added friction to your testing workflow. With Capture 8 open-root Shadow DOM elements are captured automatically, without any configuration changes.
isChromatic CSS class
You’ve long been able to use the isChromatic utility to modify your components and stories during testing. However, since this is a JavaScript utility, many of you have requested a CSS hook for easier control over styles being applied during tests.
With Capture 8, the isChromatic class is now added to the <body> element during snapshot capture. This allows you to write CSS rules specifically for the Chromatic capture environment. Whether you need to hide development-only UI, adjust animation timing, or tweak layout for testing, you now have a reliable way to target the Chromatic environment specifically in CSS.
body.isChromatic .dev-only-banner {
display: none;
}
body.isChromatic .animated-background {
animation: none;
}
Better infinite animation pausing
Pausing infinite animations for visual tests has always been challenging because identifying the start and end of the animation can be difficult, leading to inconsistent snapshots.
Capture 8 automatically detects and pauses infinite CSS animations consistently, ensuring your snapshots are stable and reproducible.
Improved handling of out-of-root elements
We’ve improved support for capturing fixed UI elements, such as headers and footers, that exist outside the Storybook root element.
Regardless of their position in the DOM, if these out-of-flow elements are visible, Chromatic will now capture them. This involves traversing the entire DOM to locate them and verify their visibility.
Browser upgrades
Capture 8 also upgrades the browsers used by Chromatic for capturing snapshots.
These browser updates might lead to a few changes in how your story renders:
- Starting in Chrome 135, <b> tags are now styled as “bolder” (used to be “bold” previously)
- Color shift in Safari: Certain combinations of colors, layered images, and CSS filters can cause a color shift in Safari due to WebKit's image rendering. This is a rare issue and should not affect most users.
- The formatting of unordered lists with surrounding text has changed consistently across all browsers. Previously, surrounding text was aligned with the bullets; it is now aligned with the list item text.
Opt-in to upgrade to Capture 8
Capture 8 is now available to all users. You'll need to opt-in from the Manage screen for your project. This will switch you over to the new infrastructure and migrate your UI test baselines using an upgrade build.
