Masonry, isotope, packery images overlapping in Safari

[macsupport]

There seems to be an issue with images loading and infinite scroll in Safari. On first load of your infinitescroll masonry demo, images are "behind" the colored blocks. On subsequent loads, the layout is as expected (After images are cached, it does not occur).
I can reproduce it using a new tab in Safari's "private window" setting consistently. Does not seem to occur in Firefox or Chrome.

Mike

[desandro]

Thanks for reporting this issue! I've seen this a couple times on mobile Safari as well. This is indeed a bug. I'll be investigating and working on a fix for the next release.

[TaktakTaktouk]

I have exactly the same issue with Safari (mobile & desktop) you can take a look here http://keepgif.com

[jeehag]

I also have a same problem.
I hope this issue to be handled soon.
It's a awesome app! I will also appreciate your effort.

[HughbertD]

👍 for same problem! Thanks for all your efforts!

[mahsajafari67]

hi..How to fix this problem?????

hi..How to fix this problem?????

[dariodev]

Something like this as a temporary solution?
Layout Packery after image loads - after items have been appended to the container.

$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	// layout Packery after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.packery('layout');
	});
});

[riccardomel]

Hi, same issue, any fix suggestion or new release?

[cPlayIt]

Like others have mentioned it happens when the images are not cached.. a lot of times they will be scattered and sometimes it happens in a way that poisons any future append.

anyone found a workaround in the mean time?

[riccardomel]

Hi, here a simple but working workaround:

NOTE: i use infinite scroll and masonry with vanilla javascript if you use jQuery is the same but check the official docs. In this example i load the next masonry grid using AJAX call

The problem: The issue is generated for an images cache problem in SAFARI only during append event in the infinte scroll plugin.

The solution:

 var grid = document.querySelector('.grid'); // the masonry grid 
  //START FIRST MASONRY STUFF
  var msnry = new Masonry( grid, {
    //Your masonry code
});

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

  //START INFINITE SCROLL 
   var infScroll = new InfiniteScroll( grid, {
      //your setting code
    });

 // on append event of infinite scroll
 infScroll.on( 'append', function( response, path, items ) {
      
      //When  imagesLoaded on progress -->
     //hide the next populated masonry grid until it's everything ok

      imagesLoaded( grid ).on( 'progress', function() {
        // layout Masonry after each image loads
        grid.classList.add('are-images-unloaded');
        console.log("Append Item...wait the fix before show");
      });
     
      //When images loaded done event listener
      imagesLoaded( grid ).on( 'done', function() {
        console.log("Done loading..YO!");

        //Re-apply the layout masonry setting
        msnry.layout();  //the magic 
        //Now it's fixed, so show the new (fixed) grid of masonry items 
        grid.classList.remove('are-images-unloaded');
      });

  });//append infScroll

Hope this can be useful, thanks a lot, hope you can fix in the next release.
Riccardo Mel - riccardomel.com

[csillery]

@riccardomel Cool man, thanks.