Isotope + Infinite Scroll + Imageloader: overlapping images on mobile only

[ghost]

I am trying to implement a simple post grid on WordPress, using Isotope + Infinite Scroll + ImageLoaded on Sage 9 (Roots). Afters weeks of tryouts, I finally made it work but then I noticed major bugs: On mobile only, newly loaded images are overlapping each other. My guess is that the imageLoader is not doing it's job properly. I also noticed that isotope's images are overlapping on desktop when I resize the screen. This problem is appearing regardless of the mobile browser (Safari, Firefox, Chrome).

Live URL: https://johnbsingfield.com/

My code:

// main.js
import 'infinite-scroll/dist/infinite-scroll.pkgd.min.js';
import 'isotope-layout/dist/isotope.pkgd.min';
import 'imagesloaded/imagesloaded.pkgd.min';

// common.js
var InfiniteScroll = require('infinite-scroll');
var imagesLoaded = require('imagesloaded');

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
});

$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

InfiniteScroll.imagesLoaded = imagesLoaded;

var iso = $grid.data('isotope');
$grid.infiniteScroll({
  path: 'page/{{#}}/',
  append: '.grid-item',
  outlayer: iso,
  hideNav: '.navigation',
});

$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
  $( items ).find('img[srcset]').each( function( i, img ) {
    img.outerHTML = img.outerHTML;
  });
});

[desandro]

Sorry, imagesLoaded does not support srcset yet. See desandro/imagesloaded#175