New set of images doesn't load (masonry, infinitescroll, imagesLoaded) in Safari


I have one strange issue with masonry, infinite scroll and imagesLoaded, only in Safari - it work perfect in other major browsers.

So when user visit page with articles, it would load images to him, if he go to down, infite scroll would load other set of articles but without images.I tool look at the source, and images are rendered but I noticed that their height is equal to 0.

This is our CommonJS

], function(imagesLoaded, Masonry, infinitescroll){

    $(document).ready(function() { 

        'use strict';

        // Main content container
        let gridSelector    = 'div.Grid',
                $container      = $(gridSelector),
                itemSelector    = '.StandardArticle';

        // Masonry + ImagesLoaded
            $container.layout = new Masonry(gridSelector, {
                itemSelector: itemSelector,
                percentPosition: true

        // Infinite Scroll
            navSelector: "#infinite_navigation",
            nextSelector: "#infinite_navigation a",
            itemSelector: itemSelector,
            dataType: 'html',
            path: [$('#infinite_navigation a').attr('href') + '?page=', ''],
            loadingImg: $('#infinite-loading-img').attr('src'),
            loading: {
              finishedMsg: 'All articles are loaded !'

            function( newElements ) {
                var $newElems = $( newElements ).css({opacity: 0});
                    $newElems.animate({opacity: 1});
                    $container.layout.appended( $newElems );



I think it’s not related to JS because, it’s pretty basic.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.