Bug 187449 – Cannot set scrollTop during momentum scroll phase

• Status: NEW
• Component: Layout and Rendering

[Chris Garrett]

Summary: 
In most desktop browsers (including Safari desktop), when setting scrollTop during scroll, scrollTop is set and scrolling continues at the same momentum as it was before scrollTop was set. This is particularly valuable for creating a general occlusion solution similar to UICollectionView, where only a few items are rendered at a time out of a much larger list of items for performance reasons.

When occluding, the sizes of unrendered items are not known before they are inserted into the DOM and actualized. Our strategy involves using placeholder elements which represent the estimated height of unrendered items, resulting in a mostly accurate scroll bar and scrolling behavior. However, as we scroll upwards and replace the placeholder with actual items, there are times when the item height may be different than we expected.

When this occurs, we use requestAnimationFrame to calculate the diff between what was expected and what the actual heights were, and seamlessly update the scroll position of the container. In most desktop browsers this is undetectable (Firefox has a separate issue which we've filed a bug report for as well). Unfortunately, all major browsers on iOS seem to prevent setting scrollTop during the momentum scroll phase, resulting in jitteriness. Since all browsers on the iOS platform use Webkit, we assumed that the issue is likely related to Webkit.

You can see a demo of this behavior, with jittering, here: https://html-next.github.io/vertical-collection/#/examples/flexible-layout

Steps to Reproduce:
Attempt to set scrollTop during momentum scroll.

Expected Results:
scrollTop is set, momentum is maintained, and the user can keep scrolling

Actual Results:
scrollTop is not set and appears to be ignored.

[Radar WebKit Bug Importer]

<rdar://problem/41980891>

[Chris Garrett]

It's worth noting that this behavior would be unnecessary for us to implement if Scroll Anchoring is accepted and implemented by the browsers https://drafts.csswg.org/css-scroll-anchoring/

Currently Chrome is the only browser that implements it, and it appears to have a buggy implementation.