So I've run into a curious issue in regards to safari. I'm developing a new site for our pany 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:

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: .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.

So I've run into a curious issue in regards to safari. I'm developing a new site for our pany 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.

• javascript
• html
• css
• ajax
• safari

• try without src tag – Ahmed Sunny Commented Aug 3, 2017 at 14:39
• @AhmedSunny I gave this a try simply for testing if this would change the results, however there was no change (safari still loads first srcset). I also would not want to remove the original src tag since I still need that for browsers that do not support srcset. Thanks for the idea though. – Tyler Bramer Commented Aug 3, 2017 at 14:47

4 Answers 4

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.

I seem to have run into numerous issues with Safari displaying my images properly when they are loaded with AJAX. I have found that the source of all these problems stems from using the srcset attribute on an image. For some reason loading an image with AJAX that has a srcset attribute on it breaks how the image is displayed and will only look at the first image in the attribute.

I have submitted a bug report to Apple and would love to know if anyone else can confirm that srcset breaks when called by AJAX in Safari.

I can confirm that Safari (Developer Preview) is setting images with srcset attributes to a width and height of 0 when they are loaded with AJAX. The srcset images look fine on the page until I make the AJAX call. Images then seem to simply disappear, although I can see them in the web inspector just fine (hovering over their srcset links in the inspector shows 0 x 0 for their width and height, with the proper natural height in parentheses).

Changing CSS min-width and min-height, or even adding width= and height= directly on the img tag, does not fix the issue. Resizing the page does not change the situation; images continue not to show up. The only "fix" is not to use srcset; as soon as I roll back to simple img tags, the AJAX loads my images with their appropriate widths and heights just fine.

I changed the "img" tag to "picture" and it worked correctly:

<picture>
   <source srcset="image_big.jpg" media="(min-width:1200px)">
   <source srcset="image_medium.jpg 992w" media="(min-width:992px)">
   <img src="image_small.jpg" alt="Agilis">
</picture>

Instead of:

<img srcset="image_small.jpg 530w,image_medium.jpg 992w,image_big.jpg" />