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.

[jonXmack]

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]

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]

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]

@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]

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]

This works perfectly for me:

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

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

[desandro]

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]

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]

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]

@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]

Having same Safari issues with srcset (also on safari/chrome mobile) image do not load as per issue https://github.com/metafizzy/infinite-scroll/issues/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]

@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]

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]

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]

you're a lifesaver, thank you!

[Mopra]

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]

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]

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