Accessibility screenshot is not correct

[themanojshukla]

FAQ

• Yes, my issue is not about variability or throttling.
• Yes, my issue is not about a specific accessibility audit (file with axe-core instead).

URL

https://www.wonderschool.com/corp/

What happened?

When I go to https://www.wonderschool.com/corp/ website in google chrome, and open lightouse via developer option and select below things:

• Mode: Snapshot
• Device: Desktop
• Category: Accessibility

then I click on 'Analyze Page Issue' button and I get accessibility report created. But the screenshot of the image is not having all parts of the website, eg, footer is missing, too many blank spaces are there, some middle page content also missing. However, if we look at the website between footer and header, a lot of section is there.

What did you expect?

I expect that the full page screenshot of my website should be captured, so that the highlighting rectangle should fit properly to all error nodes.

What have you tried?

In addition to chrome's dev tool lghthouse, I tried to use CLI and Node as well, versions are same as above, for CLI I also tried v11.2.0 & v11.3.0. Still the issue is same.

How were you running Lighthouse?

CLI, node, Chrome DevTools

Lighthouse Version

11.0.0

Chrome Version

118.0.5993.88

Node Version

18.18.2

OS

Ubuntu 23.04 / Kernel version:Linux 6.2.0-35-generic

Relevant log output

See the Lightouse report here 

https://googlechrome.github.io/lighthouse/viewer/?gist=cc2dfc8f3e78c8b03c4437630f2ef4b9

[adamraine]

Related #14336

When Lighthouse takes the full page screenshot it expands the viewport vertically to capture as much content as possible. This is so we can visually capture elements that get called out in the report. Capturing the screenshot always happens after Lighthouse analyzes the page so the viewport change shouldn't affect your result.

We disable the viewport expansion in user flows as it can affect future flow step results. However, we don't disable for individual modes being run in DevTools.

[paulirish]

The page is ~9000px tall. to get a full screenshot, lighthouse makes the viewport 9000px tall.. just like this:

but... the page layout doesn't look good there.. probably because this rule.. perhaps others:

yeah i think the way you did parallax just isnt friendly to this very-tall-viewport situation.. :/

not really a problem (we applaud no-js parallax!) .. but.. that's whats going on.

as we don't see this often we're not going to try to do some workaround to resolve it. (tbh i'm not sure we even could)