Ajax loaded images in Safari not respecting srcset

Question

So I've run into a curious issue in regards to safari. I'm developing a new site for our company and I'm using PJAX to load content for pages. Most of the images I'm displaying using the srcset property like the example code below:

<img src="/img/projects/{{ post.cover-image }}.jpg" alt="{{ post.title }}"
srcset="/img/projects/{{ post.cover-image }}-400.jpg 400w,
/img/projects/{{ post.cover-image }}-600.jpg 600w,
/img/projects/{{ post.cover-image }}-900.jpg 900w,
/img/projects/{{ post.cover-image }}-900.jpg 1200w,
/img/projects/{{ post.cover-image }}-900.jpg 1800w,
/img/projects/{{ post.cover-image }}-900.jpg 2400w"

sizes = "(min-width: 2400px) 900px,
(min-width: 1800px) 600px,
(min-width: 1200px) 500px,
(min-width: 900px) 500px,
(min-width: 600px) 600px,
(min-width: 400px) 400px" />

Note that this is being built with jekyll, so variables are in place.

I'm using object-fit on these images, which I realize has its own problems (mainly IE) but that's a different topic. The correct images are being pulled and properly displayed on Firefox and Chrome, no matter if the page was loaded initially or pulled in through PJAX from clicking a link.

The problem arises with Safari, where the images will display properly if the page is the initial page loaded, but when the page is loaded through PJAX by clicking a link, the smallest image in the srcset is the one being loaded. It also looks like object-fit might be breaking as well when loaded by PJAX but not on initial load.

Here is a link to a page which you can see an example of this happening: http://insight.insightcreative.info/work

If you load the page directly, or on a hard refresh, the images will all look fine. But if you navigate away from the page by clicking on a link and then go back to it by clicking the work link again, you'll see all of the images suddenly are of very poor quality, and are loading the -400 (400px) sized version of the image only.

Another strange thing that happens, like on this page: http://insight.insightcreative.info/work/river-valley-bank-50th-anniversary.html is that the images will only display if the page is loaded initially. If you navigate to the page through PJAX via a link (its the first project on the work page) then the images won't even display.

At first I thought these issues might be happening because I didn't have the sizes attribute included on my srcset images, but after testing them out with including the sizes attribute, they still do not work properly. I don't know if this is an issue with ajax, css, or html in regards to safari.

Any insight someone could offer would be terrific. Once again, these are only issues I've seen reflected in Safari.

EDIT

As a workaround for image quality I've gone through all my images and ordered the srcset images from highest quality first, to lowest quality last. Since Safari is only looking at the first image in the srcset it at least gives me a good quality image. I still can't figure out why Safari is making some images set to a height of 0 when loaded with AJAX, but I'll make a different question for that.

Answer 1

This issue can be worked around by forcing the images to be parsed again, after they have been loaded asynchronously.

In your ajax callback function, you can select the images that are affected and then do something like this:

$('.post').find('img').each((index, img) => { img.outerHTML = img.outerHTML; });

Not ideal, but at least the images display properly.