gatsby-plugin-image placeholder opacity transition is blinking

[laurenskling]

Description

as discussed in #28868. The image is blinking when blurring from the placeholder to the real image. Looks like because of the placeholder being removed from the DOM, so the opacity transition isnt working.

Expected result

The blur up effect should blur from the placeholder to the image, without blinking to the background color.

Actual result

You see placeholder -> background -> real image transition

Environment

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-1060NG7 CPU @ 1.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.15.4 - /var/folders/gh/yg99pwqj2rngz5wysjcgl8ph0000gn/T/yarn--1614689061406-0.29251695091521035/node
Yarn: 1.22.4 - /var/folders/gh/yg99pwqj2rngz5wysjcgl8ph0000gn/T/yarn--1614689061406-0.29251695091521035/yarn
npm: 6.14.10 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 88.0.4324.192
Safari: 14.0.2

[ascorbic]

Hi. Thanks for the report. I know exactly what's causing it, and it's something I did to fix another bug! I'll take a look today.

[huangsam]

@ascorbic thanks for taking a look into it!

Just as a FYI, I encountered a similar issue on my personal website, where my placeholder attribute for the GraphQL query function is set to BLURRED.

Here's my GraphQL query for reference:

https://github.com/huangsam/huangsam.github.io/blob/main/src/pages/index.jsx#L65-L69

I notice the background color blinking (as mentioned by @laurenskling) in between the transition when clicking on the Gatsby Link component from the About Me page back to the home page.

Here's my Link declaration for reference:

https://github.com/huangsam/huangsam.github.io/blob/main/src/components/layout.jsx#L20

I hope the added context helps with your diagnosis / resolution.

[clariceabreu]

@ascorbic do you have any updates about this issue?
I'm facing the same problem.

[ascorbic]

@clariceabreu If you're using gatsby-image-background-slider, then you're using the old image component

[clariceabreu]

@ascorbic it is necessary to update the package on the `gatsby-image-background-slider' to fix the issue, right?

[stefanweck]

Here is a little (slowed down) screen recording, in which you can see that the blurred image totally disappears before the real image is faded in, resulting in a white flash.

Screen.Recording.2021-03-15.at.11.51.23.mov

[FlxSaenger]

This problem remains even after pushing gatsby to v3.1.1.

[ascorbic]

@FlxAlbroscheit Which version of gatsby-plugin-image?

[FlxSaenger]

Hi @ascorbic I'm fully upstream: gatsby@3.1.2; gatsby-plugin-image@1.1.2

[LekoArts]

The PR wasn't released in a stable release yet, you'll need to install gatsby-plugin-image@next

[FlxSaenger]

Updating to gatsby-plugin-image@next resolves the problem indeed. Thanks a lot!