The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Page flashing in a Puppeteer screenshot usually means capture began while something was still changing: the page had not finished rendering, content or fonts arrived late, layout shifted, or an animation was in progress. Prevent it by waiting for the page’s actual visual readiness, then disabling motion only when motion—not late content—is the cause. There is no documented Puppeteer screenshot option that turns off animations.
Identify what is flashing before changing the capture
“Flashing” is a symptom, not one specific Puppeteer failure. Diagnose what changes between the unstable view and the desired screenshot; otherwise a delay or CSS override may hide the symptom without capturing the correct state.
- Late rendering: the initial document loads, but client-side code still needs to render the interface or fetch data.
- Late assets: a web font or image appears after the page seems ready.
- Layout shift: content moves as assets, data, or embedded components load.
- Motion: CSS transitions, CSS animations, or application-controlled animation continues after the content is present.
Observe the page at the intended viewport and identify the element or state that changes. If content is missing or moving into place, wait for that content or state. If the page is complete but a decorative animation keeps changing pixels, suppress or control that motion for the capture.
Wait for the right kind of readiness
Start by navigating with an appropriate lifecycle condition, then wait for a page-specific signal that means the content you need is ready. Puppeteer’s official screenshot guide shows page.goto(url, { waitUntil: 'networkidle2' }) before taking a screenshot. Treat that as an example, not a guarantee of visual stability: a quiet network does not prove that every pixel has settled. Puppeteer: Screenshots and Puppeteer: Page class describe the navigation and waiting APIs.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Prefer an application-specific condition to a guessed delay
Wait for a selector, status, or other signal that corresponds to the content you intend to capture. For example, a results page might expose a results container only after its data is rendered; a dashboard might show a loading indicator that disappears once its primary cards are populated. Choose a condition that reflects the page’s real workflow rather than assuming that a fixed number of milliseconds is enough.
A fixed timeout can be useful as a bounded fallback when the application offers no readiness signal, but it is not proof that the page is ready. Network conditions and page behavior vary, and content may still change after the timeout. Avoid adding longer sleeps as the first response to every flash.
Use network idle selectively
networkidle2 can be a useful navigation wait when the page’s network activity settles. Long polling, analytics, WebSockets, or continuously refreshed content can make network-idle waits unsuitable. Conversely, a page can become network-idle while fonts, layout, or client-side visual changes still need attention. If the page never reaches the selected lifecycle condition, use a more suitable navigation wait and then wait for the application’s specific ready state.
Wait for important fonts and images when they affect the result
If the flash is a font swap or late image, make those assets part of the readiness check. In a page where the browser exposes the Font Loading API, you can wait for document fonts before capture:
Recommended Free Tools
Rank #2
await page.evaluate(() => document.fonts.ready);For images that matter to the screenshot, wait until the relevant image elements have completed loading. A simple page-wide check is:
await page.evaluate(async () => {
const images = Array.from(document.images);
await Promise.all(images.map(image => {
if (image.complete) return Promise.resolve();
return new Promise(resolve => {
image.addEventListener('load', resolve, { once: true });
image.addEventListener('error', resolve, { once: true });
});
}));
});This waits for current document images to finish with either a load or an error; it does not make a failed image load successfully, guarantee that lazy images outside the viewport have been requested, or prevent the application from changing the DOM later. Scope the wait to assets that matter, and use the application’s own readiness signal where possible.
Complete Puppeteer example: wait, then capture
The example below uses a selector as the page-specific readiness condition, waits for fonts and document images, and then captures the page. Replace the URL and selector with values that match the application. networkidle2 is included as a navigation example; remove or change it if the page’s network behavior makes it a poor fit.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 1000 });
await page.goto('https://example.com', {
waitUntil: 'networkidle2',
timeout: 60000,
});
// Replace this with a selector that means the required content is ready.
await page.waitForSelector('[data-screenshot-ready="true"]', {
visible: true,
timeout: 30000,
});
await page.evaluate(() => document.fonts.ready);
await page.evaluate(async () => {
const images = Array.from(document.images);
await Promise.all(images.map(image => {
if (image.complete) return Promise.resolve();
return new Promise(resolve => {
image.addEventListener('load', resolve, { once: true });
image.addEventListener('error', resolve, { once: true });
});
}));
});
await page.screenshot({ path: 'capture.png', fullPage: true });
} finally {
await browser.close();
}
})();The sample assumes your page can expose a meaningful ready selector. If it cannot, substitute the most reliable observable signal available, such as a loading indicator disappearing or a known content element appearing. Do not copy the example selector literally unless the site actually provides it.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesRank #3
Disable motion only when animation is the cause
Puppeteer’s documented ScreenshotOptions cover capture behavior and output, including clip, fullPage, captureBeyondViewport, omitBackground, and fromSurface. They do not include an animation-disabling screenshot flag. Do not pass a made-up option such as animations: 'disabled'. For motion controlled by CSS, inject a temporary style immediately before capture:
await page.addStyleTag({
content: `
*, *::before, *::after {
animation: none !important;
transition: none !important;
caret-color: transparent !important;
}
`,
});
await page.screenshot({ path: 'capture.png' });This is an illustrative CSS override, not a guaranteed stabilizer. It can freeze an element at an unintended intermediate state if the application depends on a transition to reach its final appearance. CSS also cannot reliably stop animation driven by JavaScript or canvas, and page-injected CSS may not reach content in cross-origin frames. In those cases, use the application’s own way to pause or set the relevant state, and inspect the resulting capture.
Honor reduced motion when the site supports it
Some sites adapt their styles to prefers-reduced-motion. Puppeteer can emulate a reduced-motion preference, but this only helps if the page’s CSS or application behavior responds to it:
await page.emulateMediaFeatures([
{ name: 'prefers-reduced-motion', value: 'reduce' },
]);Use this when you want the page’s supported reduced-motion presentation. If you inject an override, apply it only to the screenshot workflow. When the same page will continue to be used, remove the injected style or otherwise restore the page’s original behavior after capture.
Choose full-page or element capture deliberately
Use page.screenshot() for a page view and ElementHandle.screenshot() when only a particular component is needed. Puppeteer’s screenshot guide notes that an element screenshot attempts to scroll a hidden element into view. That scroll can trigger sticky headers, lazy loading, or scroll-based effects, so wait for the element’s intended state after scrolling if those behaviors matter. See the official screenshots guide and ScreenshotOptions reference.
For a focused capture, get the element after navigation and readiness checks, then call its screenshot method:
const card = await page.$('.report-card');
if (!card) throw new Error('Report card was not found');
await card.screenshot({ path: 'report-card.png' });For full-page output, use fullPage: true with page.screenshot(). The relevant screenshot options control such things as capture region and background; they do not establish that the page’s content is ready or stable.
What Puppeteer locator stability does—and does not—mean
Puppeteer locators can wait for an element to be visible and for its bounding box to remain stable over two consecutive animation frames before an interaction. This can help when an element is still shifting position, but it is an interaction precondition—not a guarantee that all pixels, fonts, async content, or animation across the page have settled. Pair it with the readiness condition for the screenshot you actually need. The details are in Puppeteer: Page interactions.
Or skip the browser setup
If you do not want to manage a browser, ScreenshotNeo offers a one-request screenshot API. See the ScreenshotNeo documentation for request options. This cURL example saves a WebP capture of the target page:
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and responses include X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Troubleshoot flashing and unstable captures
- The page never reaches
networkidle2. Persistent network activity may prevent that condition. Use a suitable navigation wait and then wait for the target application state. - The screenshot contains a loading state. The navigation milestone likely arrived before the needed client-side content. Wait for the actual results, component, or loading-state change.
- Text changes after capture. Wait for the relevant fonts to load and confirm the page has not replaced the content after its ready signal.
- Images are missing or change after capture. Check whether they have been requested and loaded; lazy images may not be requested until scrolled into view. Wait for the images needed in the screenshot.
- The page is ready but pixels keep changing. Determine whether CSS, JavaScript, or canvas motion is responsible. Use reduced-motion support, a screenshot-only CSS override, or application-level animation control as appropriate.
- The CSS override makes the wrong frame appear. The app may need a transition to reach its final state. Wait for the desired state first, or set that state directly through the application before disabling motion.
- An element capture changes the page. Puppeteer may scroll the element into view. Account for sticky elements, lazy loading, and scroll-triggered effects, then wait for the desired result.
- A locator is stable but the screenshot still changes. A stable bounding box only addresses that element’s interaction readiness. Add checks for page content, fonts, images, or motion as relevant.
FAQ
Does Puppeteer have a built-in screenshot animation switch?
No animation-disabling option is listed in the documented ScreenshotOptions. Use CSS or application-level controls for motion.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Is networkidle2 enough to prevent page flashing?
No. It can be a useful navigation wait, but it does not guarantee visual readiness or that every page change has finished.
Should I use a fixed sleep before every screenshot?
Prefer a condition tied to the page’s content or state. A timeout may be a fallback, but waiting a guessed duration alone cannot establish readiness.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
