Infinite Scroll + Masonry works only sometimes, sometimes it bugs

EDIT:

I found a vanilla JS demo that was linked somewhere here: https://codepen.io/desandro/pen/XgRpNr
I'm experiencing a bug sometimes.
I'm pretty much using the same code:

```js
let grid = document.querySelector('.grid');

let msnry = new Masonry( grid, {
itemSelector: 'none', // select none at first
columnWidth: '.grid__col-sizer',
gutter: '.grid__gutter-sizer',
percentPosition: true,
stagger: 30,
// nicer reveal transition
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});

// initial items reveal
imagesLoaded( grid, function() {
grid.classList.remove('are-images-unloaded');
msnry.options.itemSelector = '.grid__item';
let items = grid.querySelectorAll('.grid__item');
msnry.appended( items );
});

//-------------------------------------//
// init Infinte Scroll

let infScroll = new InfiniteScroll( grid, {
path: '.older-posts',
append: '.grid__item',
outlayer: msnry,
status: '.page-load-status',
});
```

I'm using the exact same CSS code from the codepen.
However sometimes the images are stacking on top of each other like this:

It doesn't happen every time, but enough to make it not stable enough.
I'm wondering what's going wrong, can someone help me out here?

This is the html (hbs) I'm using:
```hbs

{{#foreach posts}}

{{/foreach}}

{{#if next}}
Older Posts →
{{/if}}
{{#if prev}}
← Newer Posts
{{/if}}
Page {{page}} of {{pages}}

```

Start with the linked CodePen demo and the provided Masonry, InfiniteScroll, and imagesLoaded setup, then reproduce the intermittent overlap using the supplied HTML and lazy-loaded images. Trace how appended items are laid out after each page load; done means newly loaded images consistently occupy separate masonry positions without stacking.

Written by the indexing model from the issue text.