Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider excluding user-scroll + scroll-anchor in the same frame from being penalized #90

Open
vmpstr opened this issue Jan 21, 2021 · 1 comment

Comments

@vmpstr
Copy link

vmpstr commented Jan 21, 2021

From my understanding the instability (shift) is detected by following this rough algorithm:

  • if element stuck to viewport (based on prev/new positions), not a shift
  • if element stuck to document, not a shift
  • if element does anything else, it's a shift

(credit to @skobes)

However, there seems to be another case: an element is stuck to a 'virtual' document whose position is kept intact via scroll anchoring, but it is still able to move around via user scrolls.

As an example, consider content-visibility: auto element that may change size as it leaves the viewport (technically, leaves a padded area that is centered around the viewport). For a sibling element that is on screen two events affect its position:

  1. The scroll anchoring effect which ensures that the visible element does not shift position
  2. The user scroll that moved content-visibility: auto element off screen in the first place.

The desired net effect here is that the element visually shifts by the user scroll amount from 2. However, here the desired effect is neither "sticking to the viewport" nor "sticking to the document" since both positions shift: viewport position is shifted by user scroll, and document position is shifted by the scroll anchor.

Chromium's implementation of this does report a layout shift. I think we should change this behavior.

As a side note, this is not specific to content-visibility: auto element since the same behavior can be polyfilled with an intersection observer that changes size of elements off screen

@npm1
Copy link
Collaborator

npm1 commented Dec 22, 2021

Are these cases covered by these changes? https://chromium.googlesource.com/chromium/src/+/main/docs/speed/metrics_changelog/2020_11_cls.md

If so then the implementation has excluded these for a while but I don't think we updated the spec.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants