Lighthouse: Wrong CLS for a sticky positioned element

[davidramosmrf]

Provide the steps to reproduce

1. Access to https://6rl03.csb.app/ using https://github.com/GoogleChrome/web-vitals-extension

What is the current behaviour?

The CLS metric is increased by changing the margin-top of a sticky positioned element that doesn't have any visual impact.

What is the expected behaviour?

There should be no CLS if there is no Layout Shift.

Environment Information

• Affected Channels: DevTools, web.dev
• Lighthouse version: v6.4.1
• Chrome version: 86.0.4240.111 (Official Build) (x86_64)
• Node.js version: v12.16.3
• Operating System: macOS Version 10.15.7

P.S. I am not sure if this should be considered a Lighthouse or Chrome bug. I appreciate any ideas you could have.

Let me know if you need any other details that I can give you in order to reproduce the error.

Many thanks for your help ✌️

[patrickhulce]

Thanks for filing @davidramosmrf!

I can't reproduce this in Lighthouse or PSI and given your repro is with another tool, Chromium would likely be the place you want to go to discuss this.

Before you get there though, I'm seeing a different cause than what you described (which also explains why Lighthouse gives 0). The only layout shift I see is coming from an iframe where it looks like the default margin is asynchronously removed (which does shift the layout of its tiny contents, even if those contents aren't yet visible)

Lighthouse doesn't currently count the layout shift of iframes, and I would expect Chromium to close any issue like this with "working as intended"/wontfix.

[davidramosmrf]

Thanks for your quick reply @patrickhulce .

I will open an issue to Chromium then, using a static HTML place in a gh-page.

[davidramosmrf]

Find it here in case you can take a look

[patrickhulce]

@davidramosmrf is there a chance what you're observing falls into this case?

I was testing with Chrome Canary which would've fixed it already.

[davidramosmrf]

Thanks again for your reply @patrickhulce .

I think it should be related somehow, as we discover recently this issue with CLS.

We think that this should be fix because it's not correct, but let's see what's the output.

[davidramosmrf]

HI @patrickhulce,

Just to let you know, finally they fixed the issue at Chromium

[patrickhulce]

🎉 thanks for improving Chromium @davidramosmrf! :) This means we should pick up the fix as well, so I'll go ahead and close 👍