Weird component reordering issue

[mavam]

Description

I'm experiencing a weird "component reordering" bug where the footer appears above the main content. Other than Gatsby, I'm using Semantic UI. I don't have anything UI-specific in the gatsby-*.js files; gatsby-browser.js just has an import for a CSS font, gatsby-node.js includes logic to create blog pages, and gatsby-config.js the usual plugin configurations.

Steps to reproduce

1. I'm building the site with gatsby build
2. Then I'm publishing to tenzir.surge.sh
3. Navigate with Safari on macOS 10.14.5 to https://tenzir.surge.sh/careers/backend-engineer
4. Look at botched site whose components are reordered (see below)
5. Resize browser window until mobile version kicks in
6. Resize back to desktop
7. Finally the page renders as expected.

Expected result

Actual result

Environment

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-3840QM CPU @ 2.80GHz
    Shell: 5.7.1 - /usr/local/bin/zsh
  Binaries:
    Node: 12.5.0 - /usr/local/bin/node
    npm: 6.10.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 67.0.4
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.27 => 2.13.27
    gatsby-cli: ^2.7.15 => 2.7.15
    gatsby-image: ^2.2.6 => 2.2.6
    gatsby-plugin-less: ^2.1.2 => 2.1.2
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
    gatsby-plugin-sharp: ^2.2.8 => 2.2.8
    gatsby-plugin-typography: ^2.3.2 => 2.3.2
    gatsby-remark-autolink-headers: ^2.1.3 => 2.1.3
    gatsby-remark-copy-linked-files: ^2.1.3 => 2.1.3
    gatsby-remark-images: ^3.1.6 => 3.1.6
    gatsby-remark-source-name: ^1.0.0 => 1.0.0
    gatsby-source-filesystem: ^2.1.5 => 2.1.5
    gatsby-transformer-remark: ^2.6.6 => 2.6.6
    gatsby-transformer-sharp: ^2.2.4 => 2.2.4
    gatsby-transformer-yaml: ^2.2.3 => 2.2.3
    gatsby-transformer-yaml-plus: ^0.2.2 => 0.2.2
  npmGlobalPackages:
    gatsby-cli: 2.7.15

[d4rekanguok]

Sounds like it could be a ssr mismatch issue, or css/markup issue? Does this happen during gatsby develop as well? It would be helpful to be able to see the rendered markup, can you share a link to the site?

[mavam]

Sounds like it could be a ssr mismatch issue, or css/markup issue?

I don't have a gatsby-ssr.js in the repo. I also checked whether this CSS tweak could be the culprit, but it doesn't make a difference when I comment this snippet. Other than that, I don't have any custom CSS on top of Semantic UI

Does this happen during gatsby develop as well?

No, just in the production build.

It would be helpful to be able to see the rendered markup, can you share a link to the site?

I've posted a link to the compiled site in step (3) above. Or do you mean the source?

[lannonbr]

@mavam Yes a link to the source code would be extremely helpful with trying to debug this. If you can't share the code, could you make a simple reproduction so we can try pinpointing what the issue is

[mavam]

Unfortunately I lack the bandwidth to trim down our current site into a minimal example.

Maybe I can provide some more context and we can narrow down the faulty component: here are two screenshots of our footer component, which erroneously gets rendered twice:

Does that help? Could I provide anything else along the lines that could yield more insights?

[mavam]

I was able to find the potential culprit. My Layout component looked like this:

const Layout = (props) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet title={data.site.siteMetadata.title} />
        {props.children}
        <Footer />
      </>
    )}
  />
)

After wrapping the children props and Footer into a separate tag, everything works:

      <>
        <Helmet title={data.site.siteMetadata.title} />
        <main>
          {props.children}
        </main>
        <footer>
          <Footer />
        </footer>
      </>

This workaround is good 'nuf for me, so I'm closing the issue.

(It could be just a bandaid over a wart that's showing up again down the line. But I'm not a frontend guy - just churning away until we find an experienced Gatsby/React person to work for us...)