Image flashes

[wan54]

gatsby-background-image 0.9.12

My app is using @reach/router and layout component with structure like below:

<Layout>
  <BGImage>
    {children}
  </BGImage>
</Layout>

BGImage component

import React from 'react';
import { node } from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';
import BackgroundImage from 'gatsby-background-image';
import * as browserHelpers from 'helpers/browsers';

const styles = {
    width: '100%',
    height: '100%',
    backgroundRepeat: 'no-repeat',
    backgroundBlendMode: 'multiply',
    backgroundPosition: 'center 0%','
        backgroundSize: 'cover',
};
export default function BGImage({ children }) {
    const data = useStaticQuery(graphql`
        query {
            tabletImage: file(relativePath: { eq: "hero-tablet.png" }) {
                childImageSharp {
                    fluid(maxWidth: 768, quality: 100) {
                        ...GatsbyImageSharpFluid
                    }
                }
            }
            desktopImage: file(relativePath: { eq: "hero-desktop.png" }) {
                childImageSharp {
                    fluid(maxWidth: 1440, quality: 100) {
                        ...GatsbyImageSharpFluid
                    }
                }
            }
        }
    `);
    const tabletSources = [
        data.tabletImage.childImageSharp.fluid,
        'linear-gradient(48deg, #999 10%, #fff 100%);',
    ];
    const desktopSources = [
        data.desktopImage.childImageSharp.fluid,
        'linear-gradient(48deg, #777 10%, #fff 68%);',
    ];
    const sources = browserHelpers.isTablet() ? tabletSources : desktopSources;

    return (
        <BackgroundImage fluid={sources} style={{ ...styles }}>
            {children}
        </BackgroundImage>
    );
}
BGImage.propTypes = {
    children: node.isRequired,
};

The issue that persist and not very pleasant to the eyes is the image flashes when navigating to another route.

Then I tested the usual way of showing background image on a div and no flashes at all. This is to rule out my initial thought that it could be the client route.

BGImage rewritten

export default function BGImage({ children }) {
    const className = browserHelpers.isTablet()
        ? 'bgimage-tablet'
        : 'bgimage-desktop';
    return <div className={className}>{children}</div>;
}

Any ideas?

[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 @wan54!

Haven't forgotten about your issue and was trying to get this working today. As I think this one is related to #92, you may have a look at my experiments with the CacheStorage API in the chache-storage-try & second-cache-try branches.

But of course I might be wrong entirely ; ). Meanwhile I'm thinking about a rewrite of gbi, as the image handling has gotten quite "confusing" and a little unpractical... I'm open to other suggestions, though, by all means : )!

Best,

Tim.

[timhagn]

Hi @wan54,

just played around a little with it and it now works at my place for most cases with the just published v0.9.16. Would you be so kind to try that one?

Best,

Tim.

[timhagn]

*hmmz* I just tried it using the _noBase64 query, but it still flashes a little : /. While working on your issue & #99 I could solve site switching flashes with all other types of images available, but image-stacks seem to be another topic... Maybe I get a "flash" of thoughts sometime soon...

Or aren't you interested in this, any more?

Best,

Tim.

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