Image disappears between initial load and full render

[alanoakden]

Summary

On certain devices (especially those that seem to load slowly) between the image initially rendering in low quality and blurred, and the image fully loading in high quality, there is a flash of the background colour.

I can mainly repeat this when I test mobile devices on browserstack, perhaps because they load slower.

Relevant information

Here is a video https://drive.google.com/file/d/1zX6WtxgRlb5V0T4q6vsghY8yQMk8yOCG/view?usp=sharing , you have to wait a bit for the page to load, but when it does, notice how the image is partially loaded, then black is shown (the colour set for this backgroundImage component), and then the image returns in full quality. On my own devices this doesn't really happen, but other users have mentioned it and indeed I see this in browserstack. Video in question is on an iPhone 6s running safari 12

Environment (if relevant)

    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 86.0.4240.198
    Firefox: 82.0.3
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.66 => 2.24.66
    gatsby-background-image: ^1.1.2 => 1.1.2
    gatsby-image: ^2.4.20 => 2.4.20
    gatsby-plugin-gdpr-cookies: ^1.0.7 => 1.0.7
    gatsby-plugin-manifest: ^2.4.32 => 2.4.32
    gatsby-plugin-offline: ^3.2.31 => 3.2.31
    gatsby-plugin-react-helmet: ^3.3.14 => 3.3.12
    gatsby-plugin-sass: ^2.3.14 => 2.3.14
    gatsby-plugin-sharp: ^2.6.37 => 2.6.37
    gatsby-plugin-transition-link: ^1.20.2 => 1.20.2
    gatsby-source-filesystem: ^2.3.31 => 2.3.31
    gatsby-transformer-remark: ^2.8.37 => 2.8.37
    gatsby-transformer-sharp: ^2.5.16 => 2.5.16
  npmGlobalPackages:
    gatsby-cli: 2.12.101```

[timhagn]

Hi @alanoakden,

thanks for the heads up! Alas, this might be a hard one to tackle & is probably connected to #122.
Gonna try looking into it as soon as I can, nevertheless.

Best,

Tim.

[github-actions]

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 : )!

[alanoakden]

Hi @alanoakden,

thanks for the heads up! Alas, this might be a hard one to tackle & is probably connected to #122.
Gonna try looking into it as soon as I can, nevertheless.

Best,

Tim.

Cool no worries, just to note implementing an alternative design of the component using standard gatsby image removed the error.

[timhagn]

Hi @alanoakden!

Well then for your use case it seems "solved", but for others it isn't ; ).
I'm closing this in favor of #148, as it's duplicating this one.

Best,

Tim.