UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.170 Safari/537.36

Steps to reproduce the problem:
1. Create a scroll container that enough items to scroll down in
2. Scroll to the bottom of the container
3. Dynamically insert an element whose height small enough that it will not be shown in the scroll window at the beginning of the scroll container

What is the expected behavior?
All elements move downwards by the height of the newly added item, and scrollTop remains the same

What went wrong?
scrollTop is modified by the height of the added element, making it appear as though nothing has changed.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 66.0.3359.170  Channel: stable
OS Version: OS X 10.13.5
Flash Version: 

This behavior is non-standard, and Chrome on desktop appears to be the only browser which does this. It could be useful behavior in some cases, but because it's not standard and thus cannot be relied on it becomes very problematic. 

Our specific use case is creating a generic occlusion solution (similar to UICollectionView on iOS) that only renders a set number of items. When the user scrolls, we add and remove items to give the illusion that they are scrolling in a very large list, despite only a few items being rendered. Since item heights are not known until they are rendered, we use an estimated size to create a placeholder which gives us a realistic scrollbar and scrolling behavior, and when the item is rendered we use requestAnimationFrame to fix any discrepancies seamlessly before the user notices.

When we insert an item above the scroll container's viewport, and the item's height was different than what we expected, Chrome will occasionally autocorrect the position of the viewport for us, while other browser will not. This means that we cannot trust our measurements of scrollTop before and after insertion, and must do extra bookkeeping to ensure we end up with the correct scroll position to prevent jumping and jitteriness.

A demo of the library can be found here: https://html-next.github.io/vertical-collection/
 

Deleted: chrome_scroll_top_bug.html 1.0 KB

chrome_scroll_top_bug.html 1.0 KB View Download