Skip to main content

CSS Preflight

Browsers may have unstable rendering for certain elements, such as scrollbars and border-radii. To ensure consistency in screenshots, Argos provides a set of rule to stabilize it.

This is the CSS preflight injected by our integrations before taking a screenshot:

/* Hide carets */
* {
caret-color: transparent !important;
}

/* Hide scrollbars */
::-webkit-scrollbar {
display: none !important;
}

/* Generic hide */
[data-visual-test="transparent"] {
color: transparent !important;
font-family: monospace !important;
opacity: 0 !important;
}

[data-visual-test="removed"] {
display: none !important;
}

This snippet provides the following attributes to hide or remove unstable HTML nodes:

  • data-visual-test="transparent" — hide this HTML node from screenshots
  • data-visual-test="removed — remove this HTML node from screenshots

Using these styles

To use these styles, add the appropriate attribute to your unstable element:

<button data-visual-test="transparent">Click here</button>

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