BrowserStack Full-Page Screenshots Cut Off Sticky Headers

If a BrowserStack Percy full-page screenshot shows a sticky header once at the top and does not repeat it farther down, that is documented Percy behavior. It does not by itself mean the header was cut off. If the header is visibly cropped where it should appear, or other page content is missing, investigate CSS overflow and the capture setup.

BrowserStack documents that Percy stabilizes sticky elements by displaying them only once per screenshot. The rest of the page is captured without those elements. BrowserStack’s sticky-elements guide describes this behavior. The rest of this guide helps distinguish that expected result from clipping or an incomplete capture.

1. Identify the capture workflow

First confirm that the affected screenshot is a Percy web screenshot. Percy Web projects take full-page screenshots by default. For Percy with Automate, enable full-page capture with the fullPage option. App Percy is a separate mobile-app workflow, so its scroll-and-stitch settings do not apply to a web page.

For Percy with Automate, the documented configuration shape is:

await browser.takeScreenshot({ fullPage: true });

Use the screenshot method and surrounding setup for your Automate SDK and language. The important setting for this diagnosis is fullPage: true; capture only after the page has loaded. See BrowserStack’s full-page screenshot instructions for the applicable setup.

2. Decide whether it is expected sticky behavior or clipping

What the screenshot shows	Likely explanation	Next step
The header appears once at the top; it is absent farther down the image.	Consistent with Percy’s documented sticky-element treatment.	Decide whether that one-time representation matches the visual test you want.
The header is cut off at its edge, or its intended area is visibly cropped.	Possible overflow clipping or capture positioning issue.	Inspect the header’s ancestor elements and the page’s overflow CSS.
Sections, images, or content below the fold are missing.	Possible lazy loading, internal scrolling, page readiness, capture bounds, or overflow issue.	Follow the checks below, changing one condition at a time.

This distinction follows from BrowserStack’s documented sticky behavior and its separate guidance for screenshots that fail to capture the full page. A sticky header rendered once is different from an element cropped within the captured region.

3. Inspect overflow and apply a targeted Percy CSS override

1. Open the page in the same browser and viewport used for the Percy capture.
2. Inspect the header and walk up through its ancestors in the DOM.
3. Look for an ancestor whose overflow setting clips the header or page content. Pay attention to overflow: hidden, overflow: clip, and scroll containers.
4. Override the responsible selector in Percy CSS, then capture again.

BrowserStack’s example resets overflow on .container. Use the selector that actually causes the issue on your page; do not assume the affected element is named .container.

.container {
  overflow: unset !important;
}

If the clipping comes from another ancestor, target that selector instead. A broad override can change layout and create a misleading visual result, so keep the override specific to the test case. Read BrowserStack’s full-page clipping guidance for its Percy CSS example.

4. Stabilize the page before capture

• Wait for page readiness. Start capture only after navigation and the page content needed by the test have loaded.
• Trigger lazy content. If below-the-fold images or sections are absent, scroll to the bottom before capture so lazy-loaded content has a chance to load.
• Set dynamic content to a stable state. Pause or control animations, video, and carousels that change during capture.
• Handle popups deliberately. Dismiss, accept, or otherwise set the intended popup state before taking the screenshot.
• Set the cookie state intentionally. If the test expects the visitor to accept or reject a consent banner, perform that action before capture. BrowserStack documents an example of accepting the banner before calling Percy capture.
• Check internal scrolling. If the page scrolls inside an element rather than the document, make that container fully scrollable for Percy with a targeted Percy CSS rule.
• Check the driver position. BrowserStack’s troubleshooting guidance recommends scrolling the driver to the correct page location when full-page content is incorrect.

These checks are especially useful when a capture is inconsistent between runs: dynamic content, a popup, or a lazy-loaded region can make the result look like a clipping bug. BrowserStack covers dynamic content and cookie handling in its dynamic-data guide and common capture failures in its troubleshooting guide.

5. Check the full-page capture bounds

BrowserStack documents these Percy with Automate full-page limits:

Viewport type	Documented maximum
Desktop	10,000 pixels or 10 tiles, whichever is smaller
Mobile	10 tiles

If the page approaches those limits, content beyond the supported capture length may not appear. Check the current full-page screenshot documentation when applying the limits, since service limits can change. Compare the screenshot dimensions and page length as well as the browser and viewport.

6. Use this diagnostic sequence

1. Confirm whether the project is Percy Web or Percy with Automate. For Automate, confirm full-page capture is enabled.
2. Compare the symptom with Percy’s documented behavior: a sticky header appearing once at the top is expected.
3. If the header is cropped or content is missing, inspect ancestor overflow rules and override only the responsible selector using Percy CSS.
4. Wait for page readiness; trigger lazy content; set popup, cookie, animation, video, and carousel state deliberately.
5. Determine whether scrolling happens on the document or in an internal container. Make internal content fully scrollable for the Percy capture when needed.
6. Check the driver scroll position, browser, viewport, and screenshot length against the documented limits.
7. Capture again after each targeted change so you can identify which condition caused the difference.

Common errors and fixes

Symptom	Common cause	Fix
Header appears only at the top of the full-page image.	Percy’s documented one-time rendering of sticky elements.	Treat it as expected unless the header is cropped or other content is missing. Choose a test strategy that matches the intended visual state.
Header or content is clipped along a container edge.	An ancestor’s overflow clips descendants.	Find the responsible ancestor and reset its overflow with a targeted Percy CSS override.
Lower-page images or sections are blank or absent.	Lazy content was not triggered before capture, or capture began before the page was ready.	Wait for the page and scroll to the bottom before capture.
Only content inside a panel is missing.	The page uses an internal scroll container.	Make that container fully scrollable for Percy using Percy CSS.
Capture differs between runs.	Animations, video, carousels, popups, or cookie state changed.	Pause or control dynamic elements and set the intended banner and popup state before capture.
The end of a very long page is missing.	The capture may have reached Percy’s documented full-page length limit.	Check current limits and compare the page length with the supported bounds.
The full-page result starts from an unexpected location.	The driver may not be at the intended page location.	Scroll to the correct location before capture, following BrowserStack’s troubleshooting guidance.

Or skip the browser setup

For a standalone page screenshot, ScreenshotNeo provides a screenshot API and MCP server. Its clean-shot options accept cookie and consent banners like a visitor and remove 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in headers.

One GET request returns an image or PDF. This cURL example saves a WebP screenshot of the target page:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

See the ScreenshotNeo API documentation for request options. For AI workflows, its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and any MCP client. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo and get 1,000 free screenshots a month with no card.

FAQ

Does a sticky header need to repeat down the full-page screenshot?

No. Percy documents that it displays sticky elements once per screenshot, generally at the top.

Should I use App Percy settings to fix a website screenshot?

No. App Percy is a separate mobile-app workflow. Confirm you are configuring Percy Web or Percy with Automate.

Can I remove a troublesome element from the capture?

BrowserStack recommends hiding a problematic element with Percy CSS when that matches the visual test you intend to run.

Will resetting overflow always fix a cropped header?

No. It helps only when an overflow rule is responsible. Inspect the actual DOM and target the element causing the clipping.