Why handles lighthouse the bounding box for a screenshot differently than my own implementation (fixed elements)

[BennyAlex]

Hello,

I have a problem that some bounding boxes for screenshots in my own implementation doesnt match the preview of the original lighthouse viewer.

As far as I can tell, this only happens for fixed elements. I looked in the source code and also in the report, but I cant find some special case handler for fixed elements.

{
"subItems": {
"items": [
{
"relatedNode": {
"boundingRect": {
"right": 1310,
"width": 156,
"left": 1154,
"height": 39,
"top": 901,
"bottom": 940
},
"selector": "body.home > aside.country-selector",
"path": "1,HTML,1,BODY,90,ASIDE",
"type": "node",
"lhId": "1-23-ASIDE",
"nodeLabel": "English",
"snippet": "<aside data-wg-notranslate=\"\" class=\"country-selector weglot-dropdown weglot-default weglot-invert\" tabindex=\"0\" aria-expanded=\"false\" role=\"listbox\" aria-activedescendant=\"weglot-language-en\" aria-label=\"Language selected: English\">"
}
}
],
"type": "subitems"
}

The screenshot has a a resolution of 1350x13608.

My app shows this:

Lighthouse this:

So my app shows the bounding box on the correct position (pixel wise), but since its a fixed element, lighthouse shows it at the very bottom of the fullpage screenshot.
Can someone please explain me this and where the code for those elements is, please?

Thanks very much!

[adamraine]

Can you provide an example that produces this result?

[BennyAlex]

@adamraine
Hello, please see this repo: https://github.com/BennyAlex/lighthouse-preview-test
Live: https://stackblitz.com/~/github.com/BennyAlex/lighthouse-preview-test

Here is how it looks in the original report:

The item that should be visible is covered by the cookie banner, maybe this is a bug of lighthouse?
But the box is also in another position than its coordinates from the json are.

Here is how it looks using my code:

[BennyAlex]

Yeah sure.

But it still doesn't match the position on the image.
The lighthouse viewer does something different than my one does for certain boxes. What is it? :)

[BennyAlex]

Lighthouse places the box to the very bottom of the full page screen shot, while the report box location is mich further at the top.
Since it's an absolute positioned element, I think the bound box coordinates are from a single viewport and not the full page. But why is the lighthouse viewer display the box at the very bottom?

It's either a bug or it can somehow indicate that it is a fixed element that is fixed to the bottom of the viewport and then moves it to the very bottom of the full page screenshot

[adamraine]

The positions of the element boxes are the coordinates that element was in on the page, not necessarily the position of the element within the image asset itself. This has led to some confusion in the past (See #14824).

If you're interested in how the Lighthouse report handles the box positions, the relevant code can be found here:
https://github.com/GoogleChrome/lighthouse/blob/main/report/renderer/element-screenshot-renderer.js#L221

[BennyAlex]

Thanks for your help.
I still can figure out the difference between my code and lighthouse, sadly.

Most of the boxes already work with my code, so why do these boxes not work?

In your linked issue I can only see a problem about mismatching image sizes, but not for mismatching bounding box locations.

I don't understand why the coordinates on the page should be different than the coordinates of the screenshot. It should be the same? If not, than the previews wouldn't work I guess.
Also If it is not be the same for some items, then there should be an indicator somewhere, but I can't see that as well.

Do would you kindly explain where the magic happens, please ?

[BennyAlex]

@adamraine hey, could you kindly help me with this? :D