Issue with gatsby-image Lazy Loading in Safari

[joealden]

As shown here, Safari doesn't currently support the Intersection Observer API. This API is used in gatsby-image to detect if the image should be fetched. Read more about this here.

As I don't use an Apple machine, I'll have to test this at a later date. This may not actually be an issue as Gatsby's babel config might polyfill the Intersection Observer API. I say this because it states here in the Gatsby docs that they automatically provide polyfills for browsers that have a relatively large user base (and the latest version of Safari is definitely one of them).

[joealden]

It turns out this is an issue. For some reason, when there are only 24 posts, the page is a whopping 11MB, when on Chrome and Firefox it is 250KB-450KB. It looks like this is happening because not only is Safari downloading all the post's full size images on page load, it is downloading all the images about 5 times for some reason.

[joealden]

For this issue to be investigated further, issue #9 should be resolved. This is because the virtualisation of the list may help reduce the overall payload size, as even with Safari not having the Intersection Observer API, it may mean that only the posts actually in the DOM have their images loaded.

It should also be noted that Intersection Observer is implemented in Safari TP (Technology Preview), so this likely won't be an issue when a new version of Safari is cut.