Percy flaky diffs from dynamic content in CI

By Kaveh Alemi·Latchkey

Percy flags any pixel change for review. Content that changes every run (timestamps, live data, carousels, ads, random avatars) produces diffs on unchanged code. Freeze or mask those regions so only real UI changes surface.

What this error means

Percy repeatedly shows visual changes on pages you did not touch. The diffs land on a clock, a "posted X minutes ago" label, a rotating banner, or a chart with live data.

Percy

[percy] Snapshot taken: 'Dashboard'
# Percy dashboard: unexpected diff on the "Last updated 3:42 PM" timestamp

Common causes

Time, dates, or live data render differently each run

A visible clock, relative timestamp, or data feed changes between runs, so the pixels differ even when the code did not.

Animations or randomized content not frozen

A carousel mid-transition, a spinner, or random placeholder images capture at a different frame each time.

How to fix it

Mask non-deterministic regions

Tell Percy to ignore volatile elements with percyCSS or a selector so their pixels do not count.

tests/dashboard.spec.ts

await percySnapshot(page, 'Dashboard', {
  percyCSS: '.last-updated, .live-chart { visibility: hidden; }',
});

Freeze time and disable animations

Pin the clock and stop animations before the snapshot so the render is deterministic.

tests/dashboard.spec.ts

await page.addStyleTag({ content: '*{animation:none!important;transition:none!important}' });
await page.clock.setFixedTime(new Date('2026-06-30T12:00:00Z'));

How to prevent it

Mask timestamps, live data, and ads with percyCSS or selectors.
Freeze the clock and seed random data before snapshots.
Disable animations and transitions during capture.

Frequently asked questions

What causes "Flaky Percy diffs (dynamic content)"?