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

[ardiewen]

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(R) Xeon(R) 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

[velser]

Updated to latest.

Issue persists on Safari. Had to make a copy image and two GraphQL separate results as a workaround.

[theAdmiralNelson]

I'm seeing this issue as well

[ardiewen]

not stale

[sidartha]

I'm seeing this issue too and I believe #33194 is also pointing to this issue.

From some digging, I believe that this is affecting Safari because Safari doesn't have native lazy load support. It seems like that when the image appears multiple times, forceRender is not being set to true here.

As @ardiewen points out above, this doesn't affect the development environment since forceRender is always true here when in development mode.

I'm not sure how one would go about fixing this. @ascorbic, it seems like you've worked on these files recently. Do you have any ideas?

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

[spencerwhyte]

We are also seeing this issue, let me know if there is any way that we can help 👍

[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