Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reduced Cumulative Layout Shift by adding minimum height to global header #332

Open
knice opened this issue May 21, 2024 · 1 comment
Open

Reduced Cumulative Layout Shift by adding minimum height to global header #332

knice opened this issue May 21, 2024 · 1 comment
Assignees
@knice
Labels
accessibility Is a barrier or has accessibility concerns change Change to an existing but not broken feature

Comments

@knice
Copy link
Member

knice commented May 21, 2024

Wrap the Truss global header in a div with minimum heights and media queries to reduce cumulative layout shift, especially on mobile. Basically, create a box with a proper minimum height so that the when the DOM finishes loading and Truss adds the global header, there isn't an additional shift of the layout.
@knice knice added change Change to an existing but not broken feature accessibility Is a barrier or has accessibility concerns labels May 21, 2024
@knice knice self-assigned this May 21, 2024
@knice
Copy link
Member Author

knice commented May 22, 2024

The sticky site header complicates things. This can wait until the Truss header component is truly mobile friendly with a collapsing menu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@knice knice

Labels
accessibility Is a barrier or has accessibility concerns change Change to an existing but not broken feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@knice