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);
}