gatsby-plugin-image images are flickering/blinking

[chrisworman-pela]

Description

We are trying to upgrade to gatsby-plugin-image (from gatsby-image), but images using the new GatsbyImage component are flickering. The following issue seems to describe the same issue, but the last comment says resolved, so I created another issue: #29911

Here is video of our website using gatsby-plugin-image": "^1.9.0-next.0" (same results for 1.7.1, but some threads of github suggest using next).

gatsby-plugin-image-next-720p.mov

Steps to reproduce

The issue appears to only happen on production builds (ie. gatsby build, not gatsby develop).

Here is a link to our preview build on Gatsby Cloud that has the issues:

https://build-75442147-2150-4290-bcfc-939c539e2187.gtsb.io/

I can't share the code for our production site, so I created a repo with a minimal example that shows the issue, which can be found in the gatsby-plugin-image-latest branch.

https://github.com/chrisworman-pela/gatsby-datocms-sandbox/tree/gatsby-plugin-image-latest

Here is a video of what I'm seeing in this minimal example. Note that I adjusted the network settings in Chrome to simulate a slower connection so the issue is emphasized.

gatsby-plugin-image-latest-flicker-latest-720p.mov

Expected result

Images that use the <GatsbyImage> component should not flicker/blink.

Actual result

Images that use the <GatsbyImage> component flicker/blink.

Environment

System:
OS: macOS 11.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 91.0.4472.114
Edge: 91.0.864.54
Firefox: 83.0
Safari: 14.1.1
npmPackages:
gatsby: ^3.7.2 => 3.7.2
gatsby-plugin-image: ^1.9.0-next.0 => 1.9.0-next.0
gatsby-plugin-sharp: ^3.7.1 => 3.7.1
gatsby-source-datocms: ^2.6.16 => 2.6.16
gatsby-source-filesystem: ^3.7.1 => 3.7.1
gatsby-transformer-sharp: ^3.7.1 => 3.7.1

[chrisworman-pela]

Here are some more details that may be relevant.

I upgraded some of what appear to be relevant modules to the next version based upon advice in github issue threads:

gatsby-plugin-image: ^1.9.0-next.0 => 1.9.0-next.0
gatsby-transformer-sharp: ^3.9.0-next.0 => 3.9.0-next.0
gatsby-plugin-sharp: ^3.9.0-next.0 => 3.9.0-next.0

Here is the Gatsby Cloud preview:

https://build-3627dfe5-03c4-489f-87a4-b977ef9eea9a.gtsb.io

Here are a couple videos that show the issue in Chrome (Version 91.0.4472.114 (Official Build) (x86_64)), but the issue does not happen in Safari (Version 14.1.1 (16611.2.7.1.4)).

Chrome

chrome-720p-next.mov

Safari

safari-720p-next.mov

[DanielHirunrusme]

Also experiencing the same issue. Any thoughts here?

https://www.loom.com/share/428c0cf4ad7e46c896de5e27e551b751

  "dependencies": {
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/image-url": "^0.140.22",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "date-fns": "^2.19.0",
    "gatsby": "^3.8.1",
    "gatsby-plugin-image": "^1.9.0",
    "gatsby-plugin-modal-routing-3": "^3.0.0",
    "gatsby-plugin-postcss": "^4.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-plugin-sharp": "^3.9.0",
    "gatsby-source-sanity": "^7.0.7",
    "gatsby-transformer-sharp": "^3.9.0",
    "postcss-cli": "^8.3.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-slick": "^0.28.1",
    "react-table": "^7.7.0",
    "sanity-mux-player": "^0.0.27",
    "slick-carousel": "^1.8.1"
  },

[steverandy]

The fading animation seems to also appear after each page navigation.
For page navigation, the image should be loaded from cache therefore fading animation seems like a bug.
I tried to downgrade to version v1.1.0 and it behaves correctly (no fading animation after page navigation).

[zanedev]

I'm seeing this on 2 sites I have upgraded now.

[DanielHirunrusme]

Also downgraded to v1.1.0 via @steverandy 's post. Flickering no longer happens for me.

[fk]

👋 I can confirm what @steverandy and @DanielHirunrusme are reporting – not seeing the flickering on v1.1.0 – behavior seems to have been introduced somewhere in between the latter and v1.2.0.

[Graffiss]

I can confirm that I have the same issue.

[zanedev]

Also downgraded to v1.1.0 via @steverandy 's post. Flickering no longer happens for me for this specific image in content but I do see flicker in other places when changing routes like the logo in the header possibly be related to this? #18858 (comment)

[edit] logo flicker seems to be in dev only

[kszot-ref]

Experiencing the same issue. For a workaround, I've used react-lazy-hydration package and wrapped some more prominent images in "ssrOnly" blocks.

My images flicker on a re-render that is caused from a scroll event when it's about halfway down the page. The image is initially off screen. For some reason isLoaded is false, but the image is definitely already there.

When I set isLoaded to true in the React dev tools the flicker goes away. Only happens on a production build, doesn't happen in dev.