search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

Gatsby Build Changes HTML DOM Position - NavBar Menu Toggle #26811

Closed siliconchild closed 4 years ago

siliconchild commented 4 years ago

Description

First off, the website works fine on Gatsby develop. when i build the website, the mobile navbar hamburger menu is moved to the bottom of the HTML DOM. For a tiny fraction of time after initial load the hamburger element is displayed properly and then it gets moved to the bottom of the DOM structure. weirdly though if i open another page its gets fixed and the navbar hamburger toggle now shows up properly

Steps to reproduce

Clone Repo
https://github.com/siliconchild/alternative-education
gatsby build
gatsby serve
open in mobile view

hosted version: https://altedv3.surge.sh/

Environment

System: OS: Linux 4.15 elementary OS 5.1.7 Hera CPU: (4) x64 Intel(R) Core(TM) i5-4200U CPU @ 1.60GHz Shell: 3.1.2 - /usr/bin/fish Binaries: Node: 12.18.3 - /usr/bin/node npm: 6.14.8 - /usr/bin/npm Languages: Python: 2.7.17 - /usr/bin/python Browsers: Firefox: 80.0.1 npmPackages: gatsby: ^2.24.53 => 2.24.53 gatsby-awesome-pagination: ^0.3.6 => 0.3.6 gatsby-image: ^2.4.16 => 2.4.16 gatsby-plugin-manifest: ^2.4.27 => 2.4.27 gatsby-plugin-page-progress: ^2.1.1 => 2.1.1 gatsby-plugin-sharp: ^2.6.31 => 2.6.31 gatsby-plugin-styled-components: ^3.3.10 => 3.3.10 gatsby-plugin-transition-link: ^1.20.2 => 1.20.2 gatsby-remark-images-anywhere: ^1.3.0 => 1.3.0 gatsby-source-airtable: ^2.1.1 => 2.1.1 gatsby-source-filesystem: ^2.3.27 => 2.3.27 gatsby-transformer-json: ^2.4.11 => 2.4.11 gatsby-transformer-remark: ^2.8.32 => 2.8.32 gatsby-transformer-sharp: ^2.5.14 => 2.5.14 npmGlobalPackages: gatsby-cli: 2.12.92 gatsby: 2.24.54

LekoArts commented 4 years ago

Thank you for opening this!

Your issue is not related to a Gatsby bug but you're experiencing different HTML markup/styling between the static HTML and the rehydrated HTML on the client. Or in other words: The first correct placement you see is in the HTML, then the React runtime changes this on the client.

A former colleague wrote a great blogpost about it: https://joshwcomeau.com/react/the-perils-of-rehydration/

When doing checks for window sizes, conditionally showing things etc. these kinds of things can occur. After reading the blogpost I'd propose to remove parts of the hamburger menu logic bit by bit and see at what point the behavior occurs.

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

siliconchild commented 4 years ago

@LekoArts Thanks for sharing the Article, It was a great read, Got a much better understanding of how react and Gatsby work together. This Fixed The Issue. Thanks A Lot