CLS - strange behavior? about web-vitals HOT 3 CLOSED

We noticed that getCLS(onReport) is only firing when the user changes to another tab.

That is intended, as that's the point when the metric value should be reported to an analytics server (i.e. in the visibilitychange event). See the docs on getCLS() for more details.

An animation triggered by a hover event is reporting as hadRecentInput: false, these seem to be related to different children elements having "transform: " properties.

The hover action is not considered "user input"—that's limited to things like tap, click, and keypress, so if layout shifting is happening on hover, it's expected that it will increase CLS.

We also noticed that a child element of hover animated element has backface-visilbity: unset, our hero carousel image (a sibling element of a higher parent container element) then triggers CLS entries (with reportAllChanges = true), however with backface-visiblity: hidden the hero carousel no longer triggers CLS, but hovering in and out from the animated element does trigger CLS again.

Sorry, it's a bit hard to follow exactly what you're describing, are you saying there is layout shifting going on, but you can't see it?

I have recorded a video of the steps above, please let me know if you would like to see it.

Yes, a video would be really helpful. And a demo (if you have it) would be even better.

from web-vitals.

Thank you for clarifying the first two points @philipwalton! We figured that was the case for the hidden state change, but had to make sure.

For the hard to follow behavior please follow this link and request access: https://drive.google.com/file/d/1bY3JAUW-_5VWxFIpI3HR0ldiXs11KnHz/view?usp=sharing

Unfortunately, we do not have a public facing demo but if you need additional details just let me know and I will try to provide as much context as possible.

from web-vitals.

I'm going to close this as I believe the issue is related to the Layout Instability API and not this library. If this is still a problem for you, I'd recommend filing an issue with that spec or directly in Chrome (via crbug.com).

from web-vitals.