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

[bedakb]

Hello.

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

define([
    'imagesloaded',
    'masonry-layout',
    'vendor/infinitescroll'
], function(imagesLoaded, Masonry, infinitescroll){

    $(document).ready(function() { 

        'use strict';

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

        // Masonry + ImagesLoaded
        $container.imagesLoaded(function(){
            $container.layout = new Masonry(gridSelector, {
                itemSelector: itemSelector,
                percentPosition: true
            });
        });

        // Infinite Scroll
        $container.infinitescroll({
            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.imagesLoaded(function(){
                    $newElems.animate({opacity: 1});
                    $container.layout.appended( $newElems );
                 });
            }
        );

    });

});

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

Thanks