Masonry, isotope, packery images overlapping in Safari #671

macsupport · 2017-06-26T15:31:49Z

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 · 2017-06-26T15:49:19Z

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 · 2017-07-27T14:42:26Z

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

jeehag · 2017-07-29T01:43:03Z

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 · 2017-08-01T19:47:52Z

👍 for same problem! Thanks for all your efforts!

mahsajafari67 · 2017-08-15T12:24:03Z

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

dariodev · 2017-08-19T19:26:38Z

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 · 2017-09-18T08:32:32Z

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

cPlayIt · 2017-09-20T00:23:18Z

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 · 2017-09-20T17:26:20Z

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 · 2017-09-20T17:31:26Z

@riccardomel Cool man, thanks.

jonXmack · 2017-09-21T11:08:49Z

I found I didn't need to hide/show anything, so my code was quite a bit more simple, does the same thing though.

$('.blog-masonry').on( 'append.infiniteScroll', function( event, response, path, items ) {
	$('.blog-masonry').isotope('layout');
});

riccardomel · 2017-09-21T13:13:42Z

Yes is the same, but with ajax-data the masonry.layout method "move" the cards of the masonry for a few second (the masonry block change position). My fix prevent also this issue.

jnz31 · 2017-10-16T09:27:59Z

so i don't know, what the issue is, but there is one. in my case, i loaded the content via this infinite-scroll plugin and all my images returned with a height of 0. safari only. my css setting for images is max-width: 100%; height: auto; removing height auto showed the image. now i could set the height via js, but since they are responsive, i would have to do that on resize as well. possible, but.. why?
plus they lost their @2x high-res capability, so the srcset was there, but it wasn't working anymore. i guess.
and it's not a caching issue, no matter how often i did this, the height was 0.
i now load my content via my good old traditional way (my own ajax and wp-ajax (yeah i use wordpress but am not using the infinite-scroll wordpress-plugin)) and it works just fine..
so my guessing here is, that the html code returned from this is somewhat corrupted..? i compared the html from the both ajax calls images but they are identical, i don't see any difference whatsoever (i even made a code comparison). maybe its not the images itself but.. the injection? i don't know..
btw. i am not even using isotope, so maybe this is not the right thread to jump in, but.. dunno, maybe this is related..

cpouldev · 2017-10-19T09:01:52Z

@jnz31 I had the same issue with safari. The images returned with height 0. The solution was to have a plain, old time classic img without srcset and with width and height inline in the img tag

schintu79 · 2017-11-07T09:44:53Z

HI Guys. Has this issue been solved yet? I've got the same problem.
This is my code and in Safari (mostly mobile) it overlaps

$(document).ready(function ($) {
	'use strict';


	// init Isotope
	var $grid = $('.grid').isotope({
		itemSelector: '.grid-item',
		percentPosition: true,
		masonry: {
			columnWidth: '.grid-sizer'
		}
	});
	// filter functions
	var filterFns = {
		// show if number is greater than 50
		numberGreaterThan50: function () {
			var number = $(this).find('.number').text();
			return parseInt(number, 10) > 50;
		},
		// show if name ends with -ium
		ium: function () {
			var name = $(this).find('.name').text();
			return name.match(/ium$/);
		}
	};
	// bind filter button click
	$('.filters-button-group').on('click', 'button', function () {
		var filterValue = $(this).attr('data-filter');
		// use filterFn if matches value
		filterValue = filterFns[filterValue] || filterValue;
		$grid.isotope({
			filter: filterValue
		});
	});
	// change is-checked class on buttons
	$('.button-group').each(function (i, buttonGroup) {
		var $buttonGroup = $(buttonGroup);
		$buttonGroup.on('click', 'button', function () {
			$buttonGroup.find('.is-checked').removeClass('is-checked');
			$(this).addClass('is-checked');
		});
	});
	
	$grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	// layout Packery after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.packery('layout');
	});
});
	
});

plue · 2017-12-08T13:34:29Z

This works perfectly for me:

$(window).on('load', function(){ $grid.isotope('layout') });

Just put it after var $grid = $('.grid').isotope({ ...

Fixes bug with Safari + InfiniteScroll + Masonry, metafizzy/infinite-scroll#671 👷 build v4.1.4

for #671 📅 2018

desandro · 2018-01-12T18:36:58Z

imagesLoaded v4.1.4 and Infinite Scroll v3.0.3 have been updated with a fix for this bug in Safari. Please try updating and report back if you run into any issues.

Thank you for your patience on this one. 🌈🐻

daGUY · 2018-01-19T21:19:17Z

Sorry to be the bearer of bad news, but I'm still seeing this issue with imagesLoaded 4.1.4 and Infinite Scroll 3.0.3 in Safari, both on macOS High Sierra and iOS 11.

I'm using both plugins in conjunction with Isotope, with Masonry as the layout mode, if that matters:

$articles.isotope({
    itemSelector: ".article",
    layoutMode: "masonry"
});

The best workaround I can come up with is to call isotope() again after the items are appended to force a re-layout:

$articles.on("append.infiniteScroll", function() {
    $articles.isotope();
});

p-drolima · 2018-02-15T18:11:07Z

hi desandro,

Is there a resolution for this issue? I see you didnt close it yet... and there is report afterwards also saying that is not resolved.

Could you possibly clarify?

Thank you

desandro · 2018-02-16T15:14:30Z

@p-drolima I'd like to this its fixed, as I am unable to reproduce the issue. I'm waiting to see if any other reports come in.

JimmyAppelt · 2018-03-07T13:37:15Z

Having same Safari issues with srcset (also on safari/chrome mobile) image do not load as per issue #732 where I have a suggested fix applied to get images finally loading.

Infinite Scroll 3.0.3 (using infinite-scroll.pkgd.js with included ImageLoaded as per documentation https://infinite-scroll.com/options.html#outlayer) in combination with packery as outlayer makes appending items with images overlapping (fairly unusable this way).

ralphmorris · 2018-03-19T19:34:02Z

@desandro I had this same issue too on Safari with imagesLoaded v4.1.4 and Infinite Scroll v3.0.3. Fixed it with the by adding .imagesLoaded().progress at the beginning but then on append.InfiniteScroll event adding imagesLoaded().always

This works but not sure if its the best approach?

inspirationBoard.grid = $('.board-holder').isotope({
	itemSelector: '.board__block',
});

inspirationBoard.grid.imagesLoaded().progress( function() {

	inspirationBoard.grid.isotope('layout');
  
});

// get Isotope instance
var iso = inspirationBoard.grid.data('isotope');

// init Infinite Scroll
inspirationBoard.grid.infiniteScroll({
	append: '.grid__item',
	outlayer: iso,
	path: function() {

		var pageNumber = this.loadCount + 2;
		
		        return inspirationBoard.constructUrl() + 'page=' + pageNumber;
			
		}
	},
	append: '.board__block',
	history: false,
	scrollThreshold: 2000,
	hideNav: '.pagination',
	status: '.page-load-status'
});

inspirationBoard.grid.on( 'append.infiniteScroll', function( event, response, path, items ) {
	
	inspirationBoard.grid.imagesLoaded().always( function() {

		inspirationBoard.grid.isotope('layout');
	  
	});

});

p-drolima · 2018-04-21T03:48:30Z

Hi, not sure if this can help anyone else's use case or not but as I was still struggling to find a solution for this I managed to find it finally.

jQuery(document).ready(function(){

    // Masonry grid var and options
    var $container = jQuery('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-width',
        stamp: '.stamp',
        gutter: 20,
        percentPosition: true,
        horizontalOrder: true,
        visibleStyle: { transform: 'translateY(0)', opacity: 1 },
        hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }
    });


    // get Masonry instance
    var msnry = $container.data('masonry');

     // Infinite Scroll options
    $container.infiniteScroll({
        path: '.pagination .next a',
        append: '.grid-item',
        outlayer: msnry,
        status: '.page-load-status',
        scrollThreshold: 600,
        loadOnScroll: false,
        hideNav: '.pagination',
        debug: true,
        //safari work around - this was one of the attempts but it didnt work on its own so I decided to 
        // leave it here just in case might help someone.
        onInit: function () {
            this.on( 'append', function( event, response, path, items ) {
                $container.imagesLoaded().done( function() {
                    $container.masonry();
                });

            });

        }
    });

    // initial items reveal
    $container.imagesLoaded( function() {
        $container.removeClass('are-images-unloaded');
        $container.masonry('layout');
    });

    jQuery('.view-more-button').click(function() {
        // load next page
        $container.infiniteScroll('loadNextPage', function(){
            // this was the breakthrough. after appending to grid do something rather than on load
            this.on('append.infiniteScroll', function(){
                $container.imagesLoaded().always( function() {
                    $container.masonry();
                });
            });
        });
        // enable loading on scroll
        $container.infiniteScroll( 'option', {
            loadOnScroll: true
        });
        // hide button
        jQuery('.view-more-button').hide();
    });

});

mheiduk · 2018-05-01T13:46:41Z

Hi,

same problem here, images on Safari don't get loaded. Latest Safari Version on latest MacOS Version mit Masonry implemented. Have to use another Infinite Load Script because of this.

Best,
Marc

twiddly · 2019-09-27T00:10:54Z

you're a lifesaver, thank you!

Mopra · 2020-01-29T13:17:07Z

This works perfectly for me:

$(window).on('load', function(){ $grid.isotope('layout') });

Just put it after var $grid = $('.grid').isotope({ ...

This is perfect, even in 2020 :D

mujuw · 2020-02-10T22:30:00Z

Also having trouble with this.

Code is below:

jQuery( document ).ready( function( $ ) {

	// Main content container
	var $container = $('.masonry-container');

	// Masonry
	var $grid = $container.masonry({
		columnWidth: '.masonry-brick'
	});
	var msnry = $grid.data('masonry');

	// Infinite Scroll
	$container.infiniteScroll({
		append: '.masonry-brick',
  		path: '.nextLink',
  		history: false,
		hideNav: '.pageNav',
		outlayer: msnry,
		debug: true,
	});
	
	// Prevent masonry images from overlapping on initial page load
	$container.imagesLoaded(function(){
		$grid.masonry('layout');
	});

	// Prevent masonry images from overlapping when appended (includes Safari Fix)
	$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
		$container.imagesLoaded().done(function(){
  			$( items ).find('img[srcset]').each( function( i, img ) {
    			img.outerHTML = img.outerHTML;
  			});
			$grid.masonry('layout');
		});
	});
});

Link: https://wordpress-153471-712046.cloudwaysapps.com/works/collage/

I've been struggling with this for over a month now; getting to the point where I'd pay for someone's help.

VasylTsiutsyk · 2024-02-19T18:14:36Z

https://codepen.io/desandro/pen/GodqdY
here is solution

desandro changed the title ~~Masonry, isotope, packery issue with images in Safari~~ Masonry, isotope, packery images overlapping in Safari Jun 26, 2017

desandro added the bug label Jun 26, 2017

desandro marked this as a duplicate of desandro/masonry#976 Jul 27, 2017

desandro mentioned this issue Jul 27, 2017

Safari Overlapping Items - Masonry and Infinite Scroll desandro/masonry#976

Closed

desandro mentioned this issue Aug 4, 2017

Infinite Scroll + Isotope + Safari + imagesLoaded - reproducible with official demo code #699

Closed

desandro mentioned this issue Oct 22, 2017

Safari images with srcset not showing #732

Closed

desandro added a commit to desandro/imagesloaded that referenced this issue Jan 2, 2018

🛠 check for non-zero naturalWidth

67c4e57

Fixes bug with Safari + InfiniteScroll + Masonry, metafizzy/infinite-scroll#671 👷 build v4.1.4

desandro added a commit that referenced this issue Jan 12, 2018

👷 build v3.0.3; ⬆️ update imagesLoaded v4.1.4

d2b25d9

for #671 📅 2018

kevzlou7979 mentioned this issue Jul 5, 2018

Masonry - Card Support Section - cards are not well placed as masonry grid GwtMaterialDesign/gwt-material-addins#339

Open

desandro mentioned this issue Aug 22, 2018

Overlapping items sometimes on Safari with Infinite Scroll metafizzy/isotope#1433

Closed

desandro mentioned this issue Feb 28, 2019

Combination with masonry, infinitescroll and gifs desandro/imagesloaded#280

Closed

fieg mentioned this issue Feb 16, 2020

[Solved] Overlapping images with Masonry and infinite scroll in Safari webcreate/infinite-ajax-scroll#453

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Masonry, isotope, packery images overlapping in Safari #671

Masonry, isotope, packery images overlapping in Safari #671

macsupport commented Jun 26, 2017

desandro commented Jun 26, 2017

TaktakTaktouk commented Jul 27, 2017

jeehag commented Jul 29, 2017 •

edited

Loading

HughbertD commented Aug 1, 2017

mahsajafari67 commented Aug 15, 2017 •

edited

Loading

dariodev commented Aug 19, 2017

riccardomel commented Sep 18, 2017

cPlayIt commented Sep 20, 2017

riccardomel commented Sep 20, 2017 •

edited by desandro

Loading

csillery commented Sep 20, 2017

jonXmack commented Sep 21, 2017

riccardomel commented Sep 21, 2017

jnz31 commented Oct 16, 2017 •

edited

Loading

cpouldev commented Oct 19, 2017

schintu79 commented Nov 7, 2017 •

edited by desandro

Loading

plue commented Dec 8, 2017

desandro commented Jan 12, 2018

daGUY commented Jan 19, 2018 •

edited

Loading

p-drolima commented Feb 15, 2018

desandro commented Feb 16, 2018

JimmyAppelt commented Mar 7, 2018 •

edited

Loading

ralphmorris commented Mar 19, 2018 •

edited

Loading

p-drolima commented Apr 21, 2018

mheiduk commented May 1, 2018

twiddly commented Sep 27, 2019

Mopra commented Jan 29, 2020

mujuw commented Feb 10, 2020

VasylTsiutsyk commented Feb 19, 2024

Masonry, isotope, packery images overlapping in Safari #671

Masonry, isotope, packery images overlapping in Safari #671

Comments

macsupport commented Jun 26, 2017

desandro commented Jun 26, 2017

TaktakTaktouk commented Jul 27, 2017

jeehag commented Jul 29, 2017 • edited Loading

HughbertD commented Aug 1, 2017

mahsajafari67 commented Aug 15, 2017 • edited Loading

dariodev commented Aug 19, 2017

riccardomel commented Sep 18, 2017

cPlayIt commented Sep 20, 2017

riccardomel commented Sep 20, 2017 • edited by desandro Loading

csillery commented Sep 20, 2017

jonXmack commented Sep 21, 2017

riccardomel commented Sep 21, 2017

jnz31 commented Oct 16, 2017 • edited Loading

cpouldev commented Oct 19, 2017

schintu79 commented Nov 7, 2017 • edited by desandro Loading

plue commented Dec 8, 2017

desandro commented Jan 12, 2018

daGUY commented Jan 19, 2018 • edited Loading

p-drolima commented Feb 15, 2018

desandro commented Feb 16, 2018

JimmyAppelt commented Mar 7, 2018 • edited Loading

ralphmorris commented Mar 19, 2018 • edited Loading

p-drolima commented Apr 21, 2018

mheiduk commented May 1, 2018

twiddly commented Sep 27, 2019

Mopra commented Jan 29, 2020

mujuw commented Feb 10, 2020

VasylTsiutsyk commented Feb 19, 2024

jeehag commented Jul 29, 2017 •

edited

Loading

mahsajafari67 commented Aug 15, 2017 •

edited

Loading

riccardomel commented Sep 20, 2017 •

edited by desandro

Loading

jnz31 commented Oct 16, 2017 •

edited

Loading

schintu79 commented Nov 7, 2017 •

edited by desandro

Loading

daGUY commented Jan 19, 2018 •

edited

Loading

JimmyAppelt commented Mar 7, 2018 •

edited

Loading

ralphmorris commented Mar 19, 2018 •

edited

Loading