my agent updated snapshots locally on a retina display and they fail on CI's non-retina screenshots

Screenshot snapshots are tied to the machine that recorded them: resolution and pixel density change the bytes. The agent recorded them on a retina laptop, so CI's non-retina renders never match. Throw those snapshots away, regenerate them in an environment that matches CI, and pin the viewport and pixel density in the config.

my agent updated snapshots locally on a retina display and they fail on CI's non-retina screenshots

Steps

1. Confirm the failure is environmental: open the failing image diff and check whether the differences are rendering-level (anti-aliasing, sharpness, sizing) rather than content-level (missing elements, wrong text).

   Expected: The diff shows the same content rendered at different fidelity, not a different UI.

2. Check the viewport and pixel-density settings in the test config against what CI actually uses. Note the mismatch: the agent's laptop renders at 2x density, CI at 1x.

   Expected: You can state both environments' settings side by side.

3. Delete the locally generated snapshots. They are not salvageable - every byte encodes the wrong display.

   Expected: The snapshot files are gone and the tests fail cleanly instead of mismatching.

4. Regenerate the snapshots in an environment matching CI: a container with CI's viewport and a pinned device pixel ratio, or a CI job whose artifacts you download.

   Expected: The new snapshots pass in CI on the first run.

5. Pin viewport size and pixel density explicitly in the checked-in test config, and add a note that screenshots must be regenerated in the CI-matching environment, never on a laptop.

   Expected: A future regeneration on a different machine gets caught by the config, not by a red build.

Use this when

• image snapshots fail in CI but pass locally with rendering-only diffs
• an agent generated screenshots on a retina laptop
• snapshot diffs show anti-aliasing or sizing differences, not content changes

Not for this skill when

• the snapshots are text or DOM based (resolution does not apply)
• the diff shows genuinely different UI content
• CI and local already share the same viewport and density settings

Variant phrasings

• snapshots generated on retina fail on CI non-retina
• screenshot snapshot mismatch only in CI rendering difference
• agent updated screenshots locally, CI screenshots fail

Why it happens

Screenshot comparison is byte-level: the same page rendered at 2x pixel density produces a physically different image than at 1x, with different anti-aliasing on every glyph edge. Nothing about the UI is wrong; the baseline was simply recorded on different hardware than the test runs on. The agent saw failing screenshots, did the natural thing (regenerate them), and baked its laptop's display into the repo. Every CI run after that compares CI renders against laptop renders and fails forever.

Edge cases

• Font rendering also varies by OS, so match the OS too, not just the density - a container image is the reliable way.
• If exact pixels keep fighting you, consider switching layout-critical assertions to DOM snapshots and keeping only a few image snapshots.
• Some teams generate screenshots in CI itself and commit the artifacts; that guarantees the environment matches by construction.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_k9AIWFBKOPhJsneBF8Cu7A