Combination with masonry, infinitescroll and gifs

[MrMooky]

I'm having some trouble with posted gifs in combination with imagesloaded and masonry. Basically, this happens quite often:

The initial loading seems to work fine, but as soon as the second or third page loads with infinite-scroll, the gifs are cut off sometimes. How could I prevent this?

How my code looks like:

$.getScript("https://webdata.friendships.me/js/infinite-scroll.min.js", function() {
            $.getScript("https://webdata.friendships.me/js/masonry.js", function() {

                $grid = $('.timeline__posts__container .posts').masonry({
                    itemSelector: 'none',
                    columnWidth: '.grid__col-sizer',
                    gutter: '.grid__gutter-sizer',
                    percentPosition: true,
                    stagger: 30,
                    visibleStyle: { transform: 'translateY(0)', opacity: 1 },
                    hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
                });

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

                // initial items reveal
                $grid.imagesLoaded( function() {
                    $grid.removeClass('are-images-unloaded');
                    $grid.masonry( 'option', { itemSelector: '.timeline__post' });
                    var $items = $grid.find('.timeline__post');
                    $grid.masonry('appended', $items);
                });

                $grid.infiniteScroll({
                    path: '.nextPage',
                    append: '.single__post',
                    outlayer: msnry,
                    status: '.page-load-status',
                    history: false,
                    hideNav: 'ul.pagination'
                });

            });
        });

[desandro]

Thanks for reporting this issue. Do you have a live URL I could take a look at?

[MrMooky]

You can see it on https://friendships.me. You can login with User and Pass 'desandro'.

[desandro]

Thanks for that. I didn't see the overlap in Chrome or Firefox, but I did see it in Safari. In which case, look at metafizzy/infinite-scroll#671 for some related solutions

[MrMooky]

Ah, great. I'll check if any workaround mentioned there works. Thanks a lot for checking and your feedback. :)