fadeInDuration Results in Delay Instead of Actual Fade In Duration

[codingwithchris]

Description

I'm running into an issue where I cannot actually control the amount of time it takes an image to fade in. The durationFadeIn prop is resulting in a delay of the image loading in but does not actually control the image display swap duration.

Steps to reproduce

1. Install gatsby-background-image
2. Implement background image and provide a custom value to durationFadeIn: <BackgroundImage className="image" fluid={bgImage.fluid} durationFadeIn={1000} />
3. For better visualization, test with a very long fade-in like 5000.

Expected result

The image should fade in OVER the specified duration resulting in a nice, smooth transition.

Actual result

The image WAITS the amount specified in durationFadeIn and then fades in over a very abrupt period of time (200 or so), effectively giving me no control over how the image is loaded in.

In the gatsby-image package, durationFadeIn flawlessly controls the length of time it takes for the image to fade in.

Environment

  System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v14.3.0/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.24.1 => 2.24.1 
    gatsby-background-image: ^1.1.1 => 1.1.1 
    gatsby-image: ^2.4.13 => 2.4.13 
    gatsby-plugin-manifest: ^2.4.18 => 2.4.18 
    gatsby-plugin-module-resolver: ^1.0.3 => 1.0.3 
    gatsby-plugin-netlify: ^2.3.11 => 2.3.11 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 
    gatsby-plugin-sharp: ^2.6.19 => 2.6.19 
    gatsby-plugin-sitemap: ^2.4.11 => 2.4.11 
    gatsby-plugin-styled-components: ^3.3.10 => 3.3.10 
    gatsby-plugin-typescript: ^2.4.14 => 2.4.14 
    gatsby-source-filesystem: ^2.3.19 => 2.3.19 
    gatsby-source-prismic: ^3.1.4 => 3.1.4 
    gatsby-transformer-sharp: ^2.5.11 => 2.5.11 

[timhagn]

Hi @codingwithchris,

mkay, strange behavior, gonna try investigating it this weekend, no promises, though ; ). Would you be able to provide me with the sharp-query you used for the fluid image?

Best

[codingwithchris]

I am using Prismic as my CMS with the gatsby-source-prismic plugin. They provide a query fragment and it simply used like this:

                work_bg_image {
                    fluid {
                        ...GatsbyPrismicImageFluid
                    }
                }

The query fragment is defined like this in their plugin:

export const GatsbyPrismicImageFluid = graphql`
  fragment GatsbyPrismicImageFluid on PrismicImageFluidType {
    base64
    aspectRatio
    src
    srcSet
    sizes
  }
`

[github-actions[bot]]

Hi there! As @timhagn momentarily is the main contributor to this package, this issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs, though we're open to suggestions on how to get more maintainers! Thank you for your contributions : )!

[timhagn]

Hi @codingwithchris,

the long interval occurs, because a few transitions between the :before & :after pseudo-elements happen on image loading. In the end (when the image has completed to load) the fadeIn prop gets set to false, quickly showing the image. Looks like I'd have to calculate the switches beforehand to solve this - though I had no success fiddling with it today : /.

Please stay tuned, as I'm a little short on time currently cause of client work.

Best,

Tim.

[codingwithchris]

No worries! Thanks for the update, @timhagn :)