gatsby-remark-images default settings turns off visibility of the 'blur up' effect

[greglobinski]

Description

If I use gatsby-remark-images with default settings as it is described in docs

{
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
          },
        },
      ],
    },
  }

The 'blur up' effect is invisible. It works but is invisible. It is like that because of the plugin's defaults

  const defaults = {
    maxWidth: 650,
    wrapperStyle: ``,
    backgroundColor: `white`,
    linkImagesToOriginal: true,
    pathPrefix,
  }

The default backgroundColor is set to white and because of that
box-shadow: inset 0px 0px 0px 400px ${options.backgroundColor};
is added to img.gatsby-resp-image-image which covers the 'blured' background of span.gatsby-resp-image-background-image and makes it invisible.

To see the 'blur up' effect I have to add to gatsby-remark-images setup options
backgroundColor: "transparent"

with that the box-shadow is transparent and the 'blur up' effect is visible.

Steps to reproduce

• Install gatsby-remark-images with default options as it is described in docs on website with images in remark files. Or clone https://github.com/greglobinski/gatsby-styled-blog-starter
• open the built website in Chorme with Network set to 'Slow 3G', observe the pictures loading
• then add backgroundColor: "transparent" to plugin setup options in gatsby-config.js
• rebuild website and check pictures loading again

Expected result

I think that the plugin with default settings should work as it is described in docs "Using the "blur up" technique popularized by Medium and Facebook where a small 20px wide version of the image is shown as a placeholder until the actual image is downloaded."

Actual result

But to see this default behavior I have to add special parameter backgroundColor: "transparent"

Possible solutions

1. Set backgroundColor in the plugin's defaults to transparent and add info to the docs that if you set backgroundColor in the plugin's setup options the 'blur up' effect will not be visible. (PR to plugin code and docs)
   or
2. Add backgroundColor: "transparent" to the plugin's setup options in docs with info that backgroundColor parameter different that transparent will make 'blur up' effect invisible. (PR only to docs)

I think that the first solution is the better one.

If you confirm, I can make PR.

[KyleAMathews]

Huh, what happened to them — it looks like the blurring isn't even showing up — https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/

Also the placeholder effect isn't working anymore :-(

It seems something else is broken backgroundColor...

[greglobinski]

The examples in the sink don't work because both image files are remote. I did a test and when I upload the logo to my own website (localhost) the plugin work.

It seems that the plugin works only with local files and it works with them as I described above.

Do you say that it had worked with remote image files?

[greglobinski]

For me the plugin with additional option in gatsby-config.js
backgroundColor: "transparent"
and with local files works as it should.

[m-allanson]

Thanks for the detailed writeup @greglobinski. I tried to reproduce the error you described, but I can see the blur up effect with or without a backgroundColor being set. Using your linked starter https://github.com/greglobinski/gatsby-styled-blog-starter. Could there be something else causing this?

[vojtechruz]

@m-allanson I experience the same issue. I have a project built on gatsby-starter-blog, you can try yourself just by removing the line
https://github.com/vojtechruz/vojtechruzicka-blog/blob/e82284abe808329cfd7cad25b7457217797eb150/gatsby-config.js#L32
backgroundColor: "transparent"

[greglobinski]

@m-allanson Just to make sure.

1. The issue relates only to the post pages. The pictures on the index page behave correctly, they are not built with the `gatsby-remark-images' plugin.
2. Maybe you see something like a 'blur up' effect, when progressive jpeg is loading but it's not the 'blur up' effect of gatsby-remark-images.

When you change Network speed to Slow 3G (in Chrome Dev Tools) and open the page
https://gsbs.greglobinski.com/there-are-only-two/ you will see, for some time ~1s, an 'empty space' instead of a blurred image. It's not correct, you should see the blurred image from the beginning, the page should be rendered with the blurred image. And it is, the problem is that the blurred image is hidden by another element as I described in the initial post.

Setting backgroundColor: "transparent" resolves the problem.

[kalinchernev]

I was wondering about this as well. AfterbackgroundColor: "transparent" as @greglobinski has suggested helped in my case.

Indeed to see the difference, one needs a very slow connection. In my case, I hard-refreshed pages with combination of slowing the speed down from Chrome dev tools.

Edit: be careful with png images which already have transparent backgrounds. In some cases, transparent background on top of image with transparent background yields a situation where the initial blurred image is visible even after the regular one is loaded.

[swashata]

I was thinking about using similar approach like what gatsby-image does. Initially keep the original image's opacity 0. Then when it is loaded, change (or animate) to 1. Then we don't have to reply on backgroundColor: "transparent", because it would actually break transparent PNGs. Also then we can simply set background-color: ${backgroundColor} of the image, instead of the box-shadow hack.

If this is indeed the right solution, then I would like to give it a try.

I will also check gatsby-image to see how they are doing stuff. Somehow images are shown (blurred up) on scroll into view, which looks awesome.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍