visual regression false positives from animations: how to fix

TL;DR

Freeze the page before you snapshot it: disable CSS animations and transitions, wait for network idle and fonts to load, and mask video or canvas regions. Most false positives disappear once the page is genuinely still. What is still moving after that is either real dynamic content to mask or a genuine bug.

The query

visual regression false positives from animations: how to fix

Use this when

• Diffs show half-faded elements, mid-transition states, or spinner frames
• The same page passes and fails with no code change
• Carousels, toasts, or skeleton loaders appear in baseline screenshots

Not for

• Font rasterization differences between machines
• Real layout regressions
• Comparing two different viewports or themes

Steps

1. Reproduce the flicker. Run the same visual test five times and save each diff. If the changed pixels move around, it is motion, not a regression.

Expected output: five diff images showing the changed region in different positions.

1. Inject CSS that freezes motion. Before the screenshot, add a stylesheet that sets animation and transition durations to near zero for the page under test.

Expected output: a helper applied in the test setup that disables animations, with a code comment explaining why.

1. Wait for real stillness. Wait for network idle and for web fonts to finish loading before capturing, not just for a fixed timeout.

Expected output: the test waits on network and font readiness, and spinner frames stop appearing in diffs.

1. Mask regions that legitimately move. Video players, canvases, and live tickers get a mask rectangle in the screenshot call.

Expected output: masked regions documented in the spec, with the rest of the page compared normally.

1. Re-baseline from a frozen run. Regenerate baselines after the freeze is in place so they represent the still state.

Expected output: new baselines committed and three consecutive green runs.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_f0HP5-ciP0iQzYJhdMKTzA