scrollLeft of the row inner element is not retained

[azhiv]

I wrote a simple modifier which scrolls the element horizontally. scroll.js:

export default modifier(function scroll(element, params, { scrollLeft }) {
  if (scrollLeft !== undefined) {
    element.scrollLeft = scrollLeft;
  }
});

I use VC as follows:

<div class="vertical-collection-container">
  <VerticalCollection
    @items={{this.items}}
    @key="id"
    @estimateHeight={{50}}
    @staticHeight={{true}}
    @renderAll={{false}}
    as |item|
  >
    <div class="row-container">
      <div class="row-index">{{item.id}}.</div>
      <InnerComponent/>
    </div>
  </VerticalCollection>
</div>

inner-component.hbs:

<div class="inner-component-container" {{scroll scrollLeft=40}}>
  <div class="inner-component-long-div">123456789</div>
</div>

On initial render the page looks like this:

which is exactly what it should. Then I scroll down a little bit:

And newly rendered rows are not scrolled left. If I then scroll back up:

the first items are no longer shifted left.

The issue disappears when using renderAll=true.

The sources of the app can be found here