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.

[plainice]

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.

[plainice]

This seems to have fixed the flickering/blinking for me. I followed Setting Up Your Local Dev Environment to build gatsby locally with the change below and the problem was fixed

diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
index 2bab76c57a..9a75bc738a 100644
--- a/packages/gatsby-plugin-image/src/components/hooks.ts
+++ b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -293,7 +293,7 @@ export function getMainProps(
     "data-main-image": ``,
     style: {
       ...style,
-      opacity: isLoaded ? 1 : 0,
+      opacity: isLoaded || hasImageLoaded(cacheKey) ? 1 : 0,
     },
     onLoad,
     ref,

[chrisworman-pela]

It's been about 2 months since I originally posted this issue and it is still a blocker for us upgrading some gatsby modules.

@wardpeet Can provide an update on this issue. Has the root cause been found? Can you provide an estimate for how long a fix will take?

[zanedev]

Bumping this still seeing lots of flickering/reloading issues after upgrading sites. Very frustrating at this point

[chrisworman-pela]

It's been about 4 months since I originally posted this issue and it is still a blocker for us upgrading some Gatsby modules.

@wardpeet Can you please provide an update on this issue?

[plainice]

@chrisworman-pela seems like had #32899 passed the tests maybe it would have been merged?

Is there a way to see what tests failed without logging into ci/circleci?

I've just been building gatsby locally with my fix from above. Works in my situation, I realize that doesn't work for everyone though

[steverandy]

I don't understand why Gatsby team completely ignores critical issue such as this.

[wardpeet]

Hi, I'm looking into it today and see what the exact problem here is

[wardpeet]

It's fixed on the @next channel. We'll backport it to v3 & 4.0.0

[chrisworman-pela]

@wardpeet I hate to post this, but it is a little bit annoying that after 4 months this issue is closed with the comment: "We'll backport it to v3 & 4.0.0".

Shouldn't this issue only be closed once the backport is complete? Perhaps the backport will be completed very quickly and this post is irrelevant, but how are we supposed to know when the fix is actually done (i.e. not just in next)?

Sorry, but I am very frustrated by how this issue was handled and "resolved".

[wardpeet]

Hey I understand. Managing an OSS project at this scale is not always as easy. And we dropped the ball on this issue. Sadly, these issues get autoclosed when a PR get merged. We try to publish next versions immediately and backport them as soon as possible. They usually only take a day or two.

We'll comment on the issue when the publish is done. I hope this helps a little.

[chrisworman-pela]

I appreciate you following-up and I understand. Thanks for taking care of this issue.

[Glazy]

Related to #34190 which contains a screen recording and a simple reproduction of this issue.

[AdrianGuery]

I think it's fixed by #35226

[jerehut]

Still happened to me on Gatsby 4.17, finally fixed the issue with this: https://vaihe.com/blog/fixing-gatsby-hydration-flicker-issue/

Might not be the fix for everybody, but surely was for me!

TL:DR; check out your console for hydration errors caused by initial HTML not matching the client side React render. That is one reason for the flickering to happen, as the page has to switch from the initial HTML to a complete React client side render due the mismatch.

[maaaaagda]

Gosh, finally sth worked for me! I was so frustrated by this issue, that I was going to downgrade everything or give up on gatsby . I really tried everything I found. This plugin made it work for me: https://www.gatsbyjs.com/plugins/gatsby-plugin-fix-fouc/
Thank you for it! <3

[maruthasalamr]

I'm have the issue in gatsby-plugin-image images are flickering while initial rendering of the page. Here is the video clip i a have added.

Screen Recording 2024-06-26 at 7.03.31 PM.mov

I have tried to add this package as well . But still issue is not resolved.

Gatsby-config

plugins: compact([
   {
      resolve: `gatsby-plugin-fix-fouc`,
      options: {
        attributeName: "is-loading",
       // minWidth: breakpoints.values.sm,
        timeout: 3000,
      }
    }
])

Screen.Recording.2024-06-26.at.7.03.31.PM.mov

Package.json

  "gatsby": "5.11.0"
 "gatsby-source-filesystem": "^5.13.1",
 "gatsby-plugin-image": "^3.13.1",
 "gatsby-transformer-sharp": "^5.13.1",
  "gatsby-plugin-sharp": "^5.13.1"

System Properties
OS- MAC Book Pro M3 chip
Browser - Chrome

anyone help me out ?

Thank you