Safari images with srcset not showing

[fabianjaehnke]

http://www.besau-marguerre.de/
on this wordpress site the images do not show up if they have a srcset set.

[desandro]

Thanks for reporting this issue. This is actually two separate issues that we're both tracking.

• Masonry, isotope, packery images overlapping in Safari #671 - Masonry + Safari + imagesLoaded - pictures not loading
• Add srcset support desandro/imagesloaded#175 - imagesLoaded support srcset

I'm closing this issue here. Please follow those issues.

[tomusborne]

Are those issues related? I couldn't find much information regarding this exact issue.

This is happening to me without masonry or imagesLoaded - only Infinite Scroll.

It seems images with srcset simply aren't displayed in Safari if they're loaded via Infinite Scroll.

[lsloss]

Same here. Not using imagesLoaded or Masonry. The height of appended images is being set to 0 if img height is set to auto in the CSS. Disabling the Wordpress srcset feature or removing height auto fixes this but both are far from ideal.

[nicolas-owp]

Hello @fabianjaehnke, @tomusborne, @lsloss, I found a solution for this issue. I just take the width and height attributes of the items and add them in JS, like this:

$container.on( 'load.infiniteScroll', function( event, response, path, items ) {

	var $items = $j( response ).find( '.item-entry' );

	$items.imagesLoaded( function() {

		// Take image width & height attrs to fix Safari issue
		var $image = $items.find( 'img' );
		$image.css( {
			width 	: $image.attr( 'width' ),
			height 	: $image.attr( 'height' )
		} );

	} );

} );

It is not a perfect solution but that fix the Safari issue :)

[nboliver]

Another option that seems to work for me is to force the images to be parsed again after they are loaded:

this.infiniteScrollInstance.on('append', (response, path, items) => {
  $(items).find('img').each((index, img) => {
    img.outerHTML = img.outerHTML;
  });
});```

[nicolas-owp]

Hello @nboliver, even better :)
Work perfectly for me too, thank you very much for this tip :)

[meszarosrob]

Weird issue… not sure why it is happening, but I had to deal with it today.

@nboliver good "fix" 👍

[downFast]

I just had the same issue and the above suggestions didn't work for me, what I did is calculate the image and height before they load and set height and width with js:

        $container.on( 'append.infiniteScroll', function( event, response, path ) {
          $(".article").addClass("slideIn");
          $("img").each(function() {
            var mySizes = $(this);
            getImageSize(mySizes, function(width, height){
              $(mySizes).width(width).height(height);
            });
          });
          function getImageSize(img, callback) {
            var $img = $(img);
            var wait = setInterval(function() {
              var w = $img[0].naturalWidth,
                  h = $img[0].naturalHeight;
              if (w && h) {
                  clearInterval(wait);
                  callback.apply(this, [w, h]);
                }
            }, 30);
          }
        });