Toolbar audit incorrectly flag images as above the fold

[Kynson]

Astro Info

Astro                    v5.1.7
Node                     v18.20.3
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The toolbar audit is flagging images that is below the fold when the following conditions are meet:

1. The body element is not scrollable (window.scrollY always 0), e.g. image inside a scroll container
2. A DOM mutation is made when the image is visible, i.e. seems to "above the fold" (required as the toolbar will only rerun the audit when there is a DOM mutation)

The fix #11617 does not seem to handle this situation, as window.scrollY is always 0 when the body is not the scroll container.
While the following fix mentioned in #10891 handle this correctly:

let element = htmlElement
let totalOffsetTop = 0
while (element) {
	totalOffsetTop += element.offsetTop
	element = element.offsetParent as HTMLElement
}
if (totalOffsetTop > window.innerHeight) return false;

What's the expected result?

The image should not be marked as above the fold

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-njrp6cag

Participation

• I am willing to submit a pull request for this issue.

[florian-lefebvre]

@Kynson do you want to submit a PR for it?

[Kynson]

Sure!