search

WICG / layout-instability

A proposal for a Layout Instability specification
https://wicg.github.io/layout-instability/
Other
159 stars 27 forks source link

Clarification about Hover causing layout shift #88

Closed rockeynebhwani closed 3 years ago

rockeynebhwani commented 3 years ago

I raised a bug here https://bugs.chromium.org/p/chromium/issues/detail?id=1161025#c6 but this may be a Spec question

You can see that in bug reported, issue is caused by hover and looking at the spec (https://github.com/WICG/layout-instability#recent-input-exclusion) , I see that 'Events caused by pointer movement or scrolling do not count as "input" for the purpose of the recent input exclusion and the input-related attributes on the LayoutShift entry.'

So as per spec, it's reporting hadRecentInput as 'false' and counting towards CLS but is this correct? From user perspective, in this specific case, I don't see any layout shift and negative customer experience.

And how a site owner will fix something like this?

npm1 commented 3 years ago

Interesting, @skobes any thoughts? There is a shift from the zoom container that is creating when hovering over the image. This container follows the pointer, but I wonder if it would be reasonable/easy to implement something that excludes elements that follow the pointer.

skobes-chromium commented 3 years ago

The shifts are reported because the test case is changing the left and top styles of the .zoom-container element. To avoid layout shift reports, we recommend that such effects be implemented with transform changes instead.

I don't think we should add an exclusion for elements that follow the pointer. Pointer movement isn't something the user normally expects to affect layout.