Images not loading in Safari

Hi @rjmark thanks for the detailed ticket.

@steveush pls investigate

Hi @rjmark,

Could you provide me with some additional information on your device, OS and Safari version? I’ve tested your site using the following:

Safari 15 on Monterey & Big Sur
Safari 14 on Big Sur & Catalina
Safari 13 on Catalina
Safari 12 on Mojave
Safari 11 on High Sierra & El Capitan
Safari 10.1 on Sierra
Safari 9 on El Capitan
Safari 8 on Yosemite

In all of the above all images are loading and things seem as they should.

Thanks
Steve

Safari 15.4 on Monterey 12.3 (two different computers with same setup, Mac Mini and MBP). Also have the same issue on mobile Safari on the latest versions of iOS, tested on two different iPhones.

In all cases only the first image (and sometimes a random other image) loads while all others are grey boxes.

Appreciate the quick reply. Let me know if there’s anything else I can do to help diagnose the issue.

Edit: Just tested on a brand new MacBook Air with the same results.

• This reply was modified 2 years, 12 months ago by rjmark.

Hi @rjmark,

Ok, I managed to reproduce this, it seems the latest version released by Apple, 15.4, made changes to the ResizeObserver API. I upgraded my physical device from 15.3.1, where it was working correctly, to 15.4, and I now see the grey placeholders.

My testing environments are hosted online and so the latest version takes a little time to propagate to them, however it did let me test this in a lot of previous versions with no issue. Those tests along with the error you posted definitely make me think this change to the ResizeObserver API is the culprit.

I’ll hunt down what is actually going on here and I’ll get back to you.

Thanks
Steve

Thank you so much for confirming @steveush — relieved I wasn’t doing something wrong! Really appreciate the fast response to this.

Ray

Hi @rjmark,

I’ve made a bit more progress on this. It is not the ResizeObserver changes like I originally thought but rather Apples implementation of the loading="lazy" attribute for images and iframes.

Essentially the plugin is loading all the images and setting their src attributes, however if you check in the Developer Tools > Network tab you’ll see the browser is not actually performing the request. If I remove the loading="lazy" attribute from any of the blank <img/> elements it suddenly pops into view. You can also test this by going to your iOS Settings > Safari > Experimental WebKit Features and scrolling down in the list until you see Lazy image loading is enabled by default in 15.4. If you temporarily disable this and refresh your page, everything loads correctly.

Now obviously this is not a solution, but here in lies the tricky part. We’re not outputting this attribute in our gallery markup. If you view page source you can see the markup as it is received from the server and checking the <img/> elements within the gallery, you’ll see none have the loading="lazy" attribute. This was done as it was not fully supported and we have a JS implementation providing the lazy loading logic.

So currently I’m trying to find the bit of JavaScript in your page that is going along and adding this attribute to all the images. This is also probably why it is inconsistent with the hard refresh. Clearing the cache forces the script adding the attribute to be downloaded again and the time it takes to do this is all that is needed to correctly trigger the requests for the images. Without clearing the cache the script is in memory and so is being executed without the small delay of the download.

TDLR;

The issue is being caused by a 3rd party script adding loading="lazy" to all <img/> elements in the page in conjunction with the Image lazy loading feature of Safari being shipped enabled in 15.4.

I’ll continue looking for the script and update once I’ve found it but it is currently 1AM here so it may only be tomorrow.

Thanks
Steve

Thanks @steveush – really appreciate your work. I did a little research and it looks like WordPress 5.5 adds the loading=lazy attribute by default to all images (https://www.wppagebuilders.com/disable-lazy-load-in-wordpress-5-5/).

That link has a workaround to disable lazy load, I will test and see if that fixes the problem. Hope this will help find a solution!

Thanks,
Ray

Hi @rjmark,

Ok so this does seem to be an issue with Jetpacks Lazy Loading module. I found this GitHub issue here https://github.com/Automattic/jetpack/issues/23553 which describes your issue perfectly. The developers then referenced this issue further down https://github.com/Automattic/jetpack/issues/23583 and in that there is a workaround described.

This is conflicting with the Lazy Load module of Jetpack — disabling that from the Settings > Performance area of WordPress.com resolves it, though!

Transferring to the Jetpack repo for further investigation!

Hopefully this helps!

Thanks
Steve

Thanks @steveush – not sure how I would do that since I’m not using wordpress.com or the Jetpack plugin, but I can confirm that adding the following code to my functions.php seems to be a good workaround that has fixed the problem for me.

add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

Thanks for all your help getting to the root of this problem!

• This reply was modified 2 years, 12 months ago by rjmark.

Awesome! Glad to hear it’s resolved, hopefully there is a Safari update soon to fix the root issue.

Thanks
Steve

This is the only place I found a sort of solution. By disabling Devolop> Experimental Features>Lazy image Loading it solved the problem of my Blog Archive being blank after refreshing the page. I did try putting the filter in the Theme Functions.php yet that did not work.