Gatsby: [gatsby-image] Transparent PNGs always fade-in

[tylerhunt]

Description

When using a PNG with a transparent background, there's a blurred fade-in effect even with fadeIn set to false.

Steps to reproduce

Add a PNG with an alpha channel to the page using <Img fadeIn={false} />.

Expected result

There should be no fading when the page loads or when navigating between pages.

Actual result

A blurred version of the image is visible for a short period of time and then fades out.

Here's an example with a version of the gatsby-astronaut.png image that's had the background made transparent. This shows what the fade looks like when the page is initialized (just navigating between cached pages here).

Environment

  System:
    OS: macOS Sierra 10.12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v8.10.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.76 => 2.0.76 
    gatsby-image: ^2.0.20 => 2.0.25 
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12 
    gatsby-plugin-offline: ^2.0.16 => 2.0.20 
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5 
    gatsby-plugin-sharp: ^2.0.14 => 2.0.16 
    gatsby-source-filesystem: ^2.0.8 => 2.0.12 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 

[sidharthachatterjee]

Thank you for opening this @tylerhunt

From the documentation at https://www.gatsbyjs.org/packages/gatsby-image/

If you don’t want to use the blur-up effect, choose the fragment with noBase64 at the end. If you want to use the traced placeholder SVGs, choose the fragment with tracedSVG at the end.

Can you try removing Base64 from your query and confirm if this happens?

[tylerhunt]

@sidharthachatterjee Thanks for the quick response. The _noBase64 suffix did the trick. Somehow missed the note in the documentation.

[richhiggins]

I know this is closed.. _but_ is the conclusion here simply to avoid using transparent PNGs with blur-up? Is the blurring up approach incompatible with transparency?

My solution was to re-save my PNGs without transparency as I'm a fan of the blur-up approach.

[polarathene]

@richhiggins you won't be able to avoid some overlap due to transparency if you embed base64 as a placeholder graphic until the full version is available.

I've submitted a PR about a week ago that does fix this to a degree though. It's mostly focused on skipping any CSS transition when the full image is in the browser cache, but you'll have momentarily flicker of the placeholder when it's embedded until the JS kicks in and updates the DOM.

I also removed the base64 fade out transition(doesn't really have much purpose), but it will initially still have the 0.5s delay before hiding... that's probably not good for transparent images if you want to disable fadeIn, a conditional could be added to address that. EDIT: Supported.