CLS hadRecentInput is inconsistant between using PerformanceObserver and the web vitals dev tools

[meenie]

Greetings,

When using this piece of code in the console and triggering a layout shift with a button, hadRecentInput is true.

{
  let cls = 0;

  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (!entry.hadRecentInput) {
        cls += entry.value;
        console.log('Unexpected CLS:', cls, entry);
      } else { 
        console.log('Expected CLS:', cls, entry) 
      }
    }
  }).observe({type: 'layout-shift', buffered: true});
}

But when I do the same thing using the Performance tools in Chrome Developer Tools and record web vitals, the LS that occurs reports "Had recent input No" as per this screenshot

Which one should I trust?

[tunetheweb]

Odd. These should be the same. Can you provide the example page where this happens?

[tunetheweb]

Closing due to no response.

[meenie]

I totally forgot about this issue, but I have some new information as to why it was happening. It's a complex situation, but essentially, we have an iframe on a website that is not on the same domain. Inside the iframe is a button. When clicked, the content in the iframe will essentially expand, measure itself to see how big it's container (the iframe) needs to be to fit the content, then uses a postMessage() to send that information up to the host website and the host website changes the height/width on the iframe to accommodate. When you add the above JS to the top context within the dev tools and you click the button inside of the iframe, the JS reports Expected CLS. But if you add the JS into the iframes context and click the button, the JS reports Unexpected CLS. I don't know this is a bug with how Chrome reports CLS in this type of situation, or there is something we can do to make it so the CLS is expected in both contexts.

I tried to create a CodeSanbox or CodePen for this but neither of those allow for iframes.