[gatsby-remark-images] Blurred image does not disappear on initial page load in development mode

[namukang]

Description

[gatsby-remark-images] does not hide the blurred image on initial page load in development mode

Steps to reproduce

Demo:

• Repo: https://github.com/dkthehuman/gatsby-blur-bug-demo
• Netlify: https://pedantic-noether-8663b2.netlify.com (note that the bug is not reproducible here as it only affects development mode)

Note that this bug only appears in development mode (gatsby develop), not in production (gatsby build && gatsby serve)

1. Clone the repo and run gatsby develop
2. Click on "Hello world" to view the test blog post
3. Note that when the image is loaded, the blurred image behind it disappears with opacity set to 0 (as expected)
4. Refresh the page

Expected result

The blurred image should disappear when the real image is loaded

Actual result

The blurred image remains when the real image is loaded. This is not a problem the real image fully covers the blurred image, but is very noticeable when the real image includes transparent sections.

Environment

System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.9.0 - /usr/local/bin/node
npm: 6.11.0 - /usr/local/bin/npm
Languages:
Python: 3.7.4 - /usr/local/opt/python/libexec/bin/python
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0
Safari: 12.1.2
npmPackages:
gatsby: 2.13.80 => 2.13.80
gatsby-image: 2.2.13 => 2.2.13
gatsby-plugin-sharp: 2.2.17 => 2.2.17
gatsby-remark-images: 3.1.17 => 3.1.17
gatsby-source-filesystem: 2.1.16 => 2.1.16
gatsby-transformer-remark: 2.6.19 => 2.6.19
gatsby-transformer-sharp: 2.2.11 => 2.2.11
npmGlobalPackages:
gatsby-cli: 2.7.33

[namukang]

Although this is probably low-priority as it doesn't affect production builds, I still wanted to report it because not being able to trust what's rendered under gatsby develop results in an unreliable development experience.

[ghost]

I think this is a duplicate of #17007 ?

[glennreyes]

In #17007 it happens only in production. So I think it’s related but not quite the same.

[namukang]

Hey @glennreyes, thanks for submitting your PR! I'd like to test to see whether your changes fixes this problem, but I'm having a bit of trouble figuring out how to set it up as I'm not too familiar with setting up dependencies.

Do you know how I could get my site to use your version of gatsby-image rather than the one published on NPM?

What I tried

I couldn't figure out a way to point npm directly to the git repository for gatsby-image on GitHub since it's a directory inside the gatsby repo, so I cloned gatsby and tried pointing npm at the local directory in package.json:

"gatsby-image": "file:~/Code/gatsby/packages/gatsby-image"

When I run npm install, I get the following error message:

npm WARN checkPermissions Missing write access to /Users/dskang/Code/gatsby/packages/gatsby-image/node_modules/@babel/runtime
npm WARN checkPermissions Missing write access to /Users/dskang/Code/gatsby/packages/gatsby-image/node_modules/@babel
npm WARN eslint-config-react-app@4.0.1 requires a peer of eslint-plugin-flowtype@2.x but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp@1.1.4 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

npm ERR! code ENOENT
npm ERR! syscall access
npm ERR! path /Users/dskang/Code/gatsby/packages/gatsby-image/node_modules/@babel/runtime
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, access '/Users/dskang/Code/gatsby/packages/gatsby-image/node_modules/@babel/runtime'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dskang/.npm/_logs/2019-08-30T03_47_35_313Z-debug.log

Not sure how to proceed or if there's a better way — any tips would be appreciated!

[wardpeet]

The new version is on NPM gatsby-image@2.2.15

[namukang]

Thanks @wardpeet.

I updated my test repo (https://github.com/dkthehuman/gatsby-blur-bug-demo) to use gatsby-image@2.2.15 and unfortunately, this bug is still present.

[kimbaudi]

I am also facing this issue on my local machine during development (but not during production). This seems to happen whenever I go to a page and refresh the page (Ctrl + R).

I also find this to be very noticeable when the real image includes transparent sections as you can see from the screenshots.

I've created a PR (#17154) that tries to address issues with transparent images by disabling the background-image css property that is causing the blurry background image.

Also, I am using gatsby-image@2.2.17 and still having this issue.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[AngelinCalu]

This is still an issue.