[gatsby-plugin-image] Placeholder fails to be removed on Safari (MacOS + iOS) when using multiples of the same source image.

Description

Both StaticImage or GatsbyImage fail to replace the placeholder properly on Safari during the following scenario:

1. There are multiple image components using the same source.
2. Some of these images are initially outside of the viewport, necessitating the lazy-loading behaviour.
3. User is using Safari 14 (MacOS) or Safari (iOS 14.5/14.6).
4. Behaviour is exhibited in built environment, but not development environment.

Steps to reproduce

1. Clone / view minimal repo using gatsby-starter-default from here.

2. yarn build && yarn serve, or see my hosted minimal reproduction on Gatsby Cloud here.

3. Load Safari and scroll down the viewport to load additional StaticImage components that reference the same source file.

4. After a few images, only the placeholders load. It’s at image 5 and beyond for me.

Expected result

Multiple StaticImage or GatsbyImage component references to the same source image should render fine, replacing placeholders with the correct image after coming into view.

The expected behaviour can be seen on both Chrome and Firefox.

Actual result

Per steps to reproduce, some images out of the viewport are not replacing their placeholders with the source image.

Environment

System: OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver) CPU: (4) x64 Intel® Xeon® Gold 6140 CPU @ 2.30GHz Shell: 5.4.2 - /usr/bin/zsh Binaries: Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm Languages: Python: 2.7.17 - /usr/bin/python npmPackages: gatsby: ^3.4.1 => 3.4.1 gatsby-plugin-gatsby-cloud: ^2.4.1 => 2.4.1 gatsby-plugin-image: ^1.4.0 => 1.4.0 gatsby-plugin-manifest: ^3.4.0 => 3.4.0 gatsby-plugin-offline: ^4.4.0 => 4.4.0 gatsby-plugin-react-helmet: ^4.4.0 => 4.4.0 gatsby-plugin-sharp: ^3.4.1 => 3.4.1 gatsby-source-filesystem: ^3.4.0 => 3.4.0 gatsby-transformer-sharp: ^3.4.0 => 3.4.0

[ascorbic]

Hi @sidartha. I don’t work at Gatsby anymore. I do remember fixing another simialr bug related to Safari’s lack of lazy loading. My guess is that it’s related to the way it records whether a file has previously loaded, which is keyed by URL (iirc). @wardpeet wrote a lot of that code, so may have a better idea.

[slocinskidev]

Problem is still not solved, in my case creating a separate query didn’t work, but creating a separate query + changing the quality of the image helped at least one