Skip to main content

Stabilize glitches

Some graphic glitches can be experienced because of unstable rendering engine of browsers. Here are some solutions to stabilize rendering.

Border radius

Sometimes, the border-radius property can cause screenshots to appear differently across different browsers or devices.

To address this, you can add the data-test-no-radius attribute to unstable components and inject the following CSS snippet before taking a screenshot:

[data-test-no-radius] {
border-radius: 0 !important;
}

Here is an example of function to inject styles in the page:

function injectStyles(document) {
const css = document.createElement("style");
css.type = "text/css";
css.textContent = cssText;
document.body.appendChild(css);
}