Skip to content

Fix full-page screenshots for pages using viewport units - #1553

Open
itshakemd wants to merge 6 commits into
responsively-org:mainfrom
itshakemd:main
Open

itshakemd wants to merge 6 commits into
responsively-org:mainfrom
itshakemd:main

Conversation

@itshakemd

Copy link
Copy Markdown

Fixes #1391

Description

This PR fixes full-page screenshots for websites containing viewport-relative elements such as height: 100vh.

The screenshot process now preserves the original device viewport, scrolls through the page, captures each visible section, and stitches the sections into one full-page image.

Reason for Change

Previously, full-page screenshots resized the webview to match the document height. This caused elements using viewport units to stretch across the entire screenshot.

Other capture approaches could also produce duplicated sections, black areas, or omit the footer.

Capture Behavior

  • Preserves the original device viewport dimensions
  • Supports elements using vh units
  • Captures below-the-fold content
  • Includes the complete page and footer
  • Prevents duplicated viewport sections
  • Handles smooth scrolling and scroll snapping
  • Restores the original scroll position after capture
  • Prevents capture scrolling from affecting other device previews
  • Captures multiple devices sequentially to avoid scroll conflicts

Preview

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Full page screenshot issue

1 participant