Screenshot functionality clips UI on `{ capture: 'fullPage' }` on larger resolution viewport that scales UI with css grid

[zjkipping]

Current behavior

I have a project that has a scaleable UI (no top level scroll bars) making use of css grid and setting the html/body to { width: 100vw, height: 100vh }.

When trying to screenshot this application at various resolutions (1920x1080, 3840x1080, 3840x2160) the UI gets clipped off and the screenshot file size itself is not at the viewport resolution that is configured. We do this configuration in the cypress.config.ts with the viewportHeight and viewportWidth properties.

I have tried different capture modes: 'runner', 'viewport', 'fullPage'. Only 'runner' sort of works, but that is due to it showing the zoomed out version of the app in the runner iframe. 'fullPage' clips the UI entirely and 'viewport' clips the UI and has scrollbars.

I created a public repro here that acts "similar" enough to my project: https://github.com/zjkipping/cypress-screenshot-issue

For ease of use in the repro I configure the viewport via the cy.viewport() function instead of the cy.config.ts.

The full UI should display full width navigation bar (header on left, page links on right and then 5 green boxes (one in each corner + middle) below the navigation bar.

If you install and then run npm run e2e then you will find the below 6 screenshots in the dist:

1920x1080:

{ capture: 'fullPage' }

{ capture: 'runner' }

{ capture: 'viewport' }

wide-screen (3840x1080):

{ capture: 'fullPage' }

{ capture: 'runner' }

{ capture: 'viewport' }

4k (3840x2160):

{ capture: 'fullPage' }

{ capture: 'runner' }

{ capture: 'viewport' }

Desired behavior

Create screenshots that show the full viewport in { capture: 'fullPage' } at the configured height/width at the correct file dimensions.

Test code to reproduce

https://github.com/zjkipping/cypress-screenshot-issue

Cypress Version

^12.2.0

Node version

18.12.0

Operating System

Windows 10 Pro

Debug Logs

No response

Other

No response