gatsby-remark-images-contentful isn't doing the "blur up" effect, just fades in

[sergical]

Description

As per the README.md on gatsby-remark-images-contentful it states:

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.

However, when I try to use it, it just fades in the image 🤷🏼‍♂️

Steps to reproduce

1. Install https://github.com/ryanwiemer/gatsby-starter-gcn
2. Change heroImage part of the query inside src/templates/post.js to:

heroImage {
  title
  sizes(maxWidth: 1800) {
    # Removing the '_noBase64' adds the 20x20 placeholder for blur up
    ...GatsbyContentfulSizes_withWebp 
  }
  ogimg: resize(width: 1800) {  
    src
    width
    height
  }
}

Expected result

When the post page is loading, the blur up effect should take place on the hero image

Actual result

The hero image still just fades in.

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.9.3 - ~/.nvm/versions/node/v8.9.3/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.5.1 - ~/.nvm/versions/node/v8.9.3/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Safari: 12.0
  npmPackages:
    gatsby: ^1.9.248 => 1.9.260 
    gatsby-image: ^1.0.45 => 1.0.51 
    gatsby-link: ^1.6.40 => 1.6.44 
    gatsby-plugin-canonical-urls: ^1.0.16 => 1.0.18 
    gatsby-plugin-feed: ^1.3.21 => 1.3.22 
    gatsby-plugin-manifest: ^1.0.21 => 1.0.21 
    gatsby-plugin-netlify: ^1.0.19 => 1.0.19 
    gatsby-plugin-nprogress: ^1.0.14 => 1.0.14 
    gatsby-plugin-offline: ^1.0.16 => 1.0.16 
    gatsby-plugin-react-helmet: ^2.0.10 => 2.0.11 
    gatsby-plugin-segment: ^1.0.2 => 1.0.2 
    gatsby-plugin-sitemap: ^1.2.23 => 1.2.23 
    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11 
    gatsby-remark-images-contentful: ^1.0.2 => 1.0.2 
    gatsby-remark-prismjs: ^1.2.24 => 1.2.24 
    gatsby-source-contentful: ^1.3.50 => 1.3.51 
    gatsby-source-filesystem: ^1.5.29 => 1.5.35 
    gatsby-transformer-remark: ^1.7.39 => 1.7.41 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[Chuloo]

Hey @416serg looked through this with @pieh, currently setting backgroundColor took precedence over any other style as it is run last. Made edits to your reproduction, here it is. Simply:

• Removed all backgroundColor={'#eeeeee'}
• used this in src/pages/index.js

heroImage {
            title
            sizes(maxWidth: 1800) {
              ...GatsbyContentfulSizes_withWebp
            }
}

It should work now.
A good recommendation as suggested by @pieh would be to give background color lesser priority over background image.

[sergical]

Thanks so much @Chuloo

[wardpeet]

fixed in #10944